image.onload se dispara antes de que la imagen esté completamente cargada

Question

Estoy haciendo un juego usando javascript + canvas. utilizo el siguiente código para garantizar

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

Este código, a veces funciona bien, esp. cuando las imágenes están en caché Sin embargo, al cargar por primera vez, a veces, da INDEX_SIZE_ERR: DOM Exception 1 que encontré se debe a la altura & ancho de la imagen no está disponible como lo sugiere Quickredfox en este answer ... pero luego aquí se llama drawImage solo cuando todas las imágenes se cargan? El error ocurre principalmente en dispositivos móviles

Answer 1

Debe proporcionar una referencia al controlador de carga. De lo contrario, la función se ejecuta inmediatamente. Uso:

images[i].onload = onImgLoad;