How to alert after all images loaded?

问题:

I'm building a JavaScript game and I want to alert after all images are loaded. I tried this code but it's not working:

function loadEveryThing() {
  var imgNumber = 0;

  img1 = new Image();
  img1.src = "1.png"
  img1.onload = function() {
    imgNumber = imgNumber + 1;
  }

  img2 = new Image();
  img2.src = "2.png"
  img2.onload = function() {
    imgNumber = imgNumber + 1;
  }

  img3 = new Image();
  img3.src = "3.png"
  img3.onload = function() {
    imgNumber = imgNumber + 1;
  }

  if (imgNumber == 3) alert("done")
}

回答1:

The images are loading asynchronously. Your checker code will run before any of the images get loaded. I suggest you do the checks for each image load. Something like:

function loadImages(urls,callback){

  //counter
  var counter = 0;

  //checking function
  function check(){
    counter++;
    if(urls.length === counter) callback();
  }

  //for each image, attach the handler and load
  for(var i = urls.length; i--;){
    img = new Image();
    img3.onload = check;
    img.src= urls[i]
  }

}

loadImages([/*array of urls*/],function(){
  //this function fires when all images have loaded
});

回答2:

You can do it the following way and read more about this code in my blog post

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';
}

回答3:

I can't post comment as my account "doesn't have enough reputation" but I'd like to point out the reason those solutions above were not working.

images.onload would not be executed in the order as written in the code. Therefore you don't know which image got loaded first.

As the result, imgLoaded == imgToLoad might fail to run. Sometimes it works sometimes it won't.

The same reason other solutions above would fail.