如何在數組中的所有圖像加載後創建一個Javascript事件觸發？

我正在製作一個HTML5 Canvas遊戲，並且該關卡需要預先加載一些圖片（以及最終的其他數據，如音頻文件）。我計劃將所有這些圖像存儲在一個數組或一個容器對象中。我需要做的是找到一種方法，等待所有這些圖像完全下載，然後再繼續遊戲。如何在數組中的所有圖像加載後創建一個Javascript事件觸發？

頁面打開時不會發生這種情況。這發生在正在運行的腳本內部，並且動態加載圖像。這個想法是顯示一個「加載」的消息，一旦完成了所有事情，就按照預期開始關卡。

我有權訪問jQuery，但我更願意堅持使用直接的Javascript代碼。 window.onload函數是否在這裏工作，因爲它實際上並沒有發生頁面加載時發生？如果不存在這樣的事件，有沒有辦法遍歷圖像對象並檢查它們是否已加載？

來源

2012-06-12 Sefu

的[運行，當所有的圖像被加載的功能]（http://stackoverflow.com/questions/6096240/run-a-function-when-all-images-are-loaded可能重複） – Bergi

請參閱[檢查多個加載的圖像]（http://stackoverflow.com/q/3032299/1048572） – Bergi

如果所有圖像加載（或失敗），您可以有一個計數器來檢查onload事件。
喜歡的東西

var loadedImages = 0; 
var failedImages = 0; 
var imageCount = amount of images 
function loaded(){ 
    loadedImages++; 
    if (loadedImages == imageCount){ 
     //all images successfully loaded 
    } 
    else if ((loadedImages+failedImages) == imageCount){ 
     //all images completed 
    } 
} 
function failed(){ 
    failedImages++; 
    if ((loadedImages+failedImages) == imageCount){ 
     //all images completed 
    } 
} 
var images = array(); 
for (var i = 0; i < imageCount; i++){ 
    images[i].onload = loaded; 
    images[i].onerror = failed; 
    images[i].src = the image source 
}

來源

2012-06-12 19:51:16 Musa

我會從這個answer開始，並將其轉換爲適用於多個圖像。但它使用jquery。

來源

2012-06-12 19:38:03

如何在數組中的所有圖像加載後創建一個Javascript事件觸發？

回答

相關問題