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

Question

我有一个javascript，它基本上加载了一个名称数组，然后从另一个网站加载了每个图像。

它们当然像* *一样闪烁。

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

但是，仅某些图像会更改。

当您按下Factions“玩家人数”时，您可以在此链接上看到它的发生情况。

我目前的代码是这样的：

  $.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可以从布局的各个单元中添加和删除图像。 假设您的布局有多行（在给定图像大小的情况下必须有多行），则可以根据行中是否包含任何内容来显示和隐藏整个行。

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