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

您可以通过以下方式执行此操作，并在我的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';
}

Answer 3

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

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

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

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

加载所有图像后如何提醒？

3 个答案: