image.onload pożary zanim obraz zostanie całkowicie załadowany

Question

Tworzę grę przy użyciu javascript + canvas. użyć kodu poniżej, aby zapewnić

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

ten kod czasami działa dobrze, zwł. kiedy obrazy są buforowane. Jednak przy pierwszym ładowaniu czasami daje to INDEX_SIZE_ERR: DOM Exception 1 , który znalazłem, ze względu na wysokość &, szerokość obrazu nie jest dostępna zgodnie z sugestią Quickredfox w tym answer ... ale tutaj nazywa się drawImage tylko gdy wszystkie obrazy są załadowane? Błąd występuje przede wszystkim na urządzeniach mobilnych.

Answer 1

Musisz dostarczyć referencję do nośnika ładunku. W przeciwnym razie funkcja jest natychmiast wykonywana. Użyj:

images[i].onload = onImgLoad;