图像.onload事件在图像完全加载之前触发。

Question

我正在使用JavaScript + Canvas制作游戏。 我使用以下代码来确保

标签的正确闭合：

var imgLoaded = 0;
var imgToLoad = multiImgs;
var onImgLoad = function()
{
   imgLoaded++;
   if(imgLoaded == imgToLoad)
   {
      ctx.drawImage()
   }
}

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

这段代码有时候很好用，特别是当图片被缓存时。然而，当首次加载时，有时会出现 INDEX_SIZE_ERR: DOM Exception 1 错误。我发现这是因为图片的高度和宽度不可用，正如 Quickredfox 在这个回答中所建议的...但是在所有图片都加载完成后才调用 drawImage 吗？这个错误主要发生在移动设备上。

- Ani

Answer 1

您需要提供一个对加载处理程序的引用。否则，该函数将立即执行。使用：

images[i].onload = onImgLoad;

- KooiInc

---

谢谢。这是我犯的一个很严重的疏忽！ - Ani

我一直在想为什么我的方法立即执行。谢谢你提供的解决方案！对于一个刚接触JavaScript的人来说，这并不是很明显，但是因为你的评论，我现在理解了 :) - jonas