javascript - 如何检查所有图像是否已加载？ (请不要使用jQuery)

由于.onload中异步执行的特性，Javscript不会按代码中显示的顺序运行。我从how to alert after all images loaded?中学到的摘录内容始终无法正常工作，在此处传递并在那里失败，所有这些都取决于浏览器执行的顺序。有什么建议怎么解决呢？ （请不要使用jQuery，也不要问我为什么）

var imgLoaded = 0;
var imgToLoad = 10;
var onImgLoad = function()
{
   imgLoaded++;
   if(imgLoaded == imgToLoad)
   {
      alert("done");             //Call to our draw function
   }
}

for(var i = 0; i < 10; i++)
{
  images[i] = new Image();
  images[i].onload = onImgLoad;
  images[i].src = 'images/'+i+'.png';
}

具体来说，这是代码失败的地方：

   imgLoaded++;
   if(imgLoaded == imgToLoad) { }

结果，即使校正了所有图像，有时IF条件下的代码也可能无法执行。

最佳答案

看到这个小提琴：http://jsfiddle.net/wdBbX/

var images = [];

function loadImages(callBack)
{
    var imgLoaded = 0;
    var imgToLoad = 10;

    var onImgLoad = function()
    {
          imgLoaded++;
          if(imgLoaded == imgToLoad)
          {
               callBack(imgLoaded);             //Call to our draw function
          }
    }

    for(var i = 0; i < 10; i++)
    {
          images[i] = new Image();
          images[i].onload = onImgLoad;
          images[i].src = 'images/'+i+'.png';
    }
}

loadImages(function(i){
    alert(i);
});

关于javascript - 如何检查所有图像是否已加载？ (请不要使用jQuery)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18723555/