jQuery：如何檢查數組中的所有圖像何時加載？

我有一個圖像陣列（圖像的確切數量不同），當他們全部加載時，我想要執行一些代碼。jQuery：如何檢查數組中的所有圖像何時加載？

我試過，但它不工作：

myImgArray.load(function(){ 
    alert('loaded'); 
});

我得到

33: Uncaught TypeError: Object [object Object],[object Object],[object Object],[object Object] has no method 'load'

我不認爲一個for循環或類似的將工作的東西，因爲圖像可能，大概將以「隨機」順序加載。

來源

2011-09-15 DC_

我想知道你是如何構建這個數組的。它包含什麼？ – robert

@robert基本上我會在某個div中查找所有元素，並將它們推送到一個數組中。 –

乳清你不使用jQuery：'$（'＃divId img'）'？ –

我知道這樣做的唯一方法是爲每個圖像附加一個負載處理程序，並保持已加載數量的計數。當你達到你的總數時，他們全部被加載。

這裏的代碼，不會說：

var urls = [ 
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg", 
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg", 
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg" 
]; 

var imgs = []; 
var cnt = 0; 

for (var i = 0; i < urls.length; i++) { 
    var img = new Image(); 
    img.onload = function() { 
     ++cnt; 
     if (cnt >= urls.length) { 
      // all images loaded here 
     } else { 
      // still more images to load 
     } 
    }; 
    img.src = urls[i]; 
    imgs.push(img); 
}

你可以看到它在這裏的行動：http://jsfiddle.net/jfriend00/7KF7V/

對於這項工作，該onload處理函數具有被設置.src屬性之前，因爲要分配如果圖像位於瀏覽器緩存中，onload可能會在分配.onload之前立即觸發，從而導致事件丟失。

來源

2011-09-15 22:52:43 jfriend00

+1不強制jQuery進入 – tjameson

jQuery：如何檢查數組中的所有圖像何時加載？

回答

相關問題