检查是否已加载多张图像

Question

我正在使用html5的画布功能.我在画布上画了一些图像,我需要检查它们是否已经全部加载才能使用它们.

我已经在一个数组中声明了它们,我需要一种方法来检查它们是否同时加载但我不知道如何做到这一点.

这是我的代码:

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();
}

Answer 2

你不能简单地使用一个循环并为所有onload分配相同的功能吗？

var myImages = ["green.png", "blue.png"];

(function() {
  var imageCount = myImages.length;
  var loadedCount = 0, errorCount = 0;

  var checkAllLoaded = function() {
    if (loadedCount + errorCount == imageCount ) {
       // do what you need to do.
    }
  };

  var onload = function() {
    loadedCount++;
    checkAllLoaded();
  }, onerror = function() {
    errorCount++;
    checkAllLoaded();
  };   

  for (var i = 0; i < imageCount; i++) {
    var img = new Image();
    img.onload = onload; 
    img.onerror = onerror;
    img.src = myImages[i];
  }
})();

Answer 3

一种 hackish 方法是将 JS 命令添加到另一个文件中并将其放在页脚中。这样它会最后加载。

然而，使用 jQuery(document).ready 也比原生 window.onload 效果更好。

您正在使用 Chrome，不是吗？