通過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可以從布局的各個單元中添加和刪除圖像。 假設您的布局有多行（在給定圖像大小的情況下必須有多行），則可以根據行中是否包含任何內容來顯示和隱藏整個行。

由於布局部分不會更改，因此只有在整行進出時或只有一個單元格經常更改時，才會出現明顯的閃爍。 通過讓腳本不將服務器上仍保留的播放器圖像從一個更新移到下一個更新，可以進一步減少單個單元的閃爍。 當然，這可能會導致布局中的空白，您必須決定處理。