javascript - 检查是否加载了多个图像

Question

我正在使用 html5 的 Canvas 功能。我有一些图像要在 Canvas 上绘制，我需要检查它们是否已全部加载，然后才能使用它们。

我已经在一个数组中声明了它们，我需要一种方法来检查它们是否同时加载，但我不确定该怎么做。

这是我的代码:

var color = new Array();
color[0] = new Image();
color[0].src = "green.png";
color[1] = new Image();
color[1].src = "blue.png";

目前要检查图像是否已加载，我必须像这样一张一张地做:

color[0].onload = function(){
//code here
}
color[1].onload = function(){
//code here
}

如果我有更多的图像，我将在稍后的开发中使用，这将是一种非常低效的检查所有图像的方法。

我如何同时检查它们？

Answer 1

如果你想在加载完所有图片后调用一个函数，你可以尝试下面的方法，它对我有用

var imageCount = images.length;
var imagesLoaded = 0;

for(var i=0; i<imageCount; i++){
    images[i].onload = function(){
        imagesLoaded++;
        if(imagesLoaded == imageCount){
            allLoaded();
        }
    }
}

function allLoaded(){
    drawImages();
}