所有图片加载完成后如何进行警报？

Question

我正在开发一款JavaScript游戏，想要在所有图像都加载完成后弹出提示。我尝试了以下代码，但它并没有起作用：

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")
}

- Sky Walker

Answer 1

图片是异步加载的。您的检查器代码将在任何图像加载之前运行。我建议您对每个图像加载进行检查。例如：

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

- Joseph

Answer 2

你可以按照以下方式进行操作，并在我的博客文章中阅读更多关于此代码的内容。

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

- Ani

Answer 3

我无法发表评论，因为我的账户“声望不够”，但我想指出上述解决方案未能奏效的原因。

images.onload 不会按照代码中编写的顺序执行。因此，您不知道哪个图像先加载。

结果，imgLoaded == imgToLoad 可能无法运行。有时它可以工作，有时它不行。

其他上述解决方案失败的原因也是相同的。

- yyc888