Question

我有一个基本上加载一个名字数组的javascript，然后它从另一个网站加载这些图像中的每一个。

他们当然会像 * *一样闪烁。

我想预先加载这些图像，但由于它们每3秒钟更换一次，因此很难预先加载它们。

但是，只有部分图像会发生变化。

按下Factions“玩家计数”时，您可以看到this link上的情况。

我目前的代码是：

  $.ajax({
    type: "GET",
    url: "updater/updateFactions.php"
  }).done(function(data) {
    var newData = data.split(":");
    document.getElementById('factions').innerHTML = newData[0]+"/"+newData[1];
    var playerData = newData[2].split(",");
    var data = "";
    for(i in playerData) {
        data += "<img src='http://signaturecraft.us/avatars/5/face/" + playerData[i] + ".png'>";
    }
    document.getElementById('factionsplayers').innerHTML = data;
  });

Answer 1

您可以获取图像，预加载图像并在加载所有图像后更改内容

$.ajax({
    type: "GET",
    url: "updater/updateFactions.php"
}).done(function (data) {
    var newData    = data.split(":"),
        playerData = newData[2].split(","),
        promises   = [],
        images     = $.map(function(image) {
            var def = $.Deferred(), 
                img = new Image(),
                src = 'http://signaturecraft.us/avatars/5/face/' + image + '.png';

            img.onload = function() {
                def.resolve();
            }
            img.src = src;
            if (img.comlete) img.onload();

            promises.push(def.promise());
            return $(img);
        });

    $.when.apply($, promises).done(function() {
        $('#factionsplayers').html(images);
    });

    $('#factions').html(newData[0] + "/" + newData[1]);
});

Answer 2

你变得闪烁，因为你总是替换'factionsplayers'元素的所有内容，迫使浏览器重绘整个事物。

我建议创建一个完整的布局，如果它们在那里可以容纳所有100个玩家图标（一个表是单向的，但是有一整套思想说明从不使用表格进行布局，仅用于表格数据）。然后，您的javascript可以添加和删除布局的各个单元格中的图像。假设您的布局有多行（必须根据图像的大小），您可以根据行中是否包含任何内容来显示和隐藏整行。

由于布局部分不会发生变化，因此当整行进出时，或者单个单元格经常更改时，您只会出现明显的闪烁。您可以通过让脚本不将仍在服务器上的播放器图像从一次更新移动到下一次更新来进一步减少单个单元格闪烁。当然，这可能会导致您的布局出现空白，您必须决定处理这些空白。

使用JQuery通过AJAX动态预加载图像

2 个答案: