確定一組圖像何時用jQuery加載完成？

Question

那麼，如果你可以determine when an image has finished loading with jQuery，它是否與多個圖像完全相同？

Answer 1

您可以輕鬆地做到這一點：如果你使用$（ 'IMG'）

function onloadall(images, callback) { 
    var n = 0; 
    for (var i=0; i<images.length; i++) { 
     if (!images[i].width) { 
      n++; 
      images[i].onload = function(){ 
       if (--n==0) callback(); 
      } 
     } 
    } 
    if (n==0) callback(); 
} 

demo

Answer 2

爲每個正在加載的圖像創建一個Deferred對象，並將它們存儲在一個數組中。

由於每個圖像的​​調用回調函數，resolve相關的遞延對象，然後使用$.when()調用最終回調，只有當所有承諾的已經得到解決：

function onAllLoaded(imgs, callback) { 
    var i, n, a = []; 
    for (i = 0, n = imgs.length; i < n; ++i) { 
     a[i] = $.Deferred(); 
     $(imgs[i]).on('load', a[i].resolve); // not using .onload to avoid clashes 
    } 
    $.when($, a).done(callback); 
} 

要知道，在一些瀏覽器（早期的IE？）你需要採取特殊的措施來確保.load回調實際發生。這超出了這個答案的範圍。