javascript - 加载所有图像后如何发出警报？

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

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

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

Answer 3

我无法发表评论，因为我的帐户“没有足够的声誉”，但我想指出上述解决方案不起作用的原因。

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

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

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