Question

我正在开发一款HTML5 Canvas游戏，该级别需要预先加载一些图像（以及最终的其他数据，如音频文件）。我计划将所有这些图像存储在数组或容器对象中。我需要做的是找到一种方法，等待所有这些图像完全下载后再继续游戏。

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

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

Answer 1

如果所有图像都加载（或失败），您可以使用计数器检查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
}

Answer 2

我会从这个answer开始并将其转换为多个图像。它使用jquery。

如何在加载数组中的所有图像后触发Javascript事件？

2 个答案: