image.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 вызывается только тогда, когда все изображения загружены? Ошибка в основном возникает в мобильных устройствах

Answer 1

Вы должны предоставить ссылку на обработчик нагрузки. В противном случае функция выполняется немедленно. Использование:

images[i].onload = onImgLoad;