jQuery，如何預加載圖像並在圖像加載時得到通知？

Question

我對所有的Javascript資料仍然陌生，我必須誠實地說，我還沒有試驗任何與我的問題有關的東西。

我想知道是否有一種方法或插件與jQuery預加載多個圖像和圖像加載時調用函數？

Answer 1

您可以使用load事件來處理圖像，但它們有一些跨瀏覽器問題（這取決於您定位的平臺）。

var allImgs = $("#container img").filter(function() { return ! this.complete; }); 
var allImgsLength = allImgs.length; 

allImgs.on("load", function() { 
    if (--allImgsLength) { 
     // Images have loaded. 
    } 
}); 

如果你不介意的話，包括一個插件，有waitForImages（免責聲明：我寫的），其中處理這個比較好聽。 :)

你會使用它就像...

$("#container").waitForImages(function() { 
    // Images have loaded. 
}); 

如果你不想使用jQuery的一切，你能適應的第一個例子。如果您只指定現代瀏覽器...

var allImgs = [].filter.call(document.querySelectorAll("#container img"), 
          function(img) { 
           return ! img.complete; 
          }); 
var allImgsLength = allImgs.length; 

[].forEach.call(allImgs, function(img) { 
    img.addEventListener(function() { 
     if (--allImgsLength) { 
      // Images have loaded. 
     } 
    }); 
}); 

如果你必須支持舊的瀏覽器...（HTTP [使用jQuery預先載入圖像]的

var allImgs = document.getElementById("container").getElementsByTagName("img"); 
var allImgsLength = allImgs.length; 
var i; 
var eventCallback = function() { 
         if (--allImgsLength) { 
          // Images have loaded. 
         } 
        }; 

for (i = 0; i < allImgsLength; i++) { 
    if (allImgs[i].complete) { 
     allImgsLength--; 
    } 

    if (allImgs[i].addEventListener) { 
     allImgs[i].addEventListener("load", eventCallback); 
    } elseif (allImgs[i].attachEvent) { 
     allImgs[i].attachEvent("onload", eventCallback); 
    } else { 
     allImgs[i].onload = eventCallback; 
    } 
}