2

我正在开发一个 HTML5 Canvas 游戏，关卡需要预加载一些图像（最终还需要加载其他数据，例如音频文件）。我计划将所有这些图像存储在一个数组或一个容器对象中。我需要做的是找到一种方法，等到所有这些图像都下载完成后再继续游戏。

打开页面时不会发生这种情况。这发生在运行脚本的深处，并且图像是动态加载的。这个想法是显示“加载”消息，一旦一切完成，按预期启动关卡。

我可以使用 jQuery，但我更愿意使用直接的 Javascript 代码。window.onload 函数是否在这里工作，因为它在页面加载时实际上并没有发生？如果不存在这样的事件，有没有办法遍历图像对象并检查它们是否已加载？

4

2 回答 2

3

You can have a counter to check in the onload event if all the images load(or failed).
Something like

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-12T19:51:16.353 回答
0

我将从这个答案开始并将其转换为适用于多个图像。它虽然使用 jquery。

于 2012-06-12T19:38:03.397 回答