加載多個圖像時用於回調的跨瀏覽器解決方案？

Question

我檢查了其他的問題，但他們都有信息如何做一個回調，當一個特定的圖像加載：

var img = new Image(); 
img.src = "images/img.png"; 
if (!img.complete) { 
    img.onload = function() { 
     // code to be executed when the image loads 
    } 
} 

或者一個簡單的檢查，看看是否所有圖像都裝有一個「如果」語句。另外，$（window）.load（或onLoad或其他）不起作用。

對我來說，我加載兩個圖像：

var img1 = new Image(); 
var img2 = new Image(); 
img1.src = 'images/img1.png'; 
img2.src = 'images/img2.png'; 

我如何定義一個類似於在第一個例子中的回調，但這樣做的，當兩個圖像是否已完成加載執行？

謝謝你的時間。

Answer 1

下面是創建多張影像，並調用回調函數時，他們都裝：

function createImages(srcs, fn) { 
    var imgs = [], img; 
    var remaining = srcs.length; 
    for (var i = 0; i < srcs.length; i++) { 
     img = new Image(); 
     imgs.push(img); 
     img.onload = function() { 
      --remaining; 
      if (remaining == 0) { 
       fn(srcs); 
      } 
     }; 
     img.src = srcs[i]; 
    } 
    return(imgs); 
} 

var imgs = createImages(['images/img1.png', 'images/img2.png'], myCallback); 

附：無論何時使用.onload處理圖像，您必須在設置.src值之前設置.onload處理程序，因爲如果圖像位於高速緩存中，則onload處理程序可能會在設置.src值時立即觸發。如果您尚未設置onload處理程序，那麼它可能永遠不會觸發，因爲在設置處理程序時，圖像已經加載。這發生在一些瀏覽器中。如果您需要onload事件，請始終在.src之前設置.onload。

Answer 2

它被稱爲參考計數。這是n個任務完成後運行單個回調的標準技術。

var count = 2; 
img1.onload = function() { 
    count-- === 0 && callback(); 
} 
img2.onload = function() { 
    count-- === 0 && callback(); 
} 

function callback() { 

}