Controllo di più immagini caricate

Question

Sto utilizzando la funzione canvas di html5. Ho alcune immagini da disegnare sulla tela e ho bisogno di controllare che siano state caricate tutte prima di poterle usare.

Li ho dichiarati all'interno di un array, ho bisogno di un modo per verificare se sono stati caricati tutti contemporaneamente ma non sono sicuro di come farlo.

Ecco il mio codice:

var color = new Array(); 
color[0] = new Image(); 
color[0].src = "green.png"; 
color[1] = new Image(); 
color[1].src = "blue.png"; 

Attualmente per verificare se le immagini sono caricate, avrei dovuto farlo uno per uno in questo modo:

color[0].onload = function(){ 
//code here 
} 
color[1].onload = function(){ 
//code here 
} 

Se ho avuto molto di più immagini, che svilupperò più avanti, sarebbe un modo davvero inefficiente di controllarle tutte.

Come dovrei controllarli tutti allo stesso tempo?

Answer 1

Un modo hacker per farlo è aggiungere il comando JS in un altro file e posizionarlo nel piè di pagina. In questo modo si carica per ultimo.

Tuttavia, l'utilizzo di jQuery (document) .ready funziona anche meglio del nativo window.onload.

Stai utilizzando Chrome, vero?

Answer 2

Utilizzare il window.onload che spara quando tutti immagini/cornici e risorse esterne vengono caricate:

window.onload = function(){ 
    // your code here........ 
}; 

Quindi, si può tranquillamente inserire il codice di immagini legate a window.onload perché per il momento tutte le immagini hanno già caricato.

More information here.

Answer 3

Non puoi semplicemente utilizzare un loop e assegnare la stessa funzione a tutti gli onload?

var myImages = ["green.png", "blue.png"]; 

(function() { 
    var imageCount = myImages.length; 
    var loadedCount = 0, errorCount = 0; 

    var checkAllLoaded = function() { 
    if (loadedCount + errorCount == imageCount) { 
     // do what you need to do. 
    } 
    }; 

    var onload = function() { 
    loadedCount++; 
    checkAllLoaded(); 
    }, onerror = function() { 
    errorCount++; 
    checkAllLoaded(); 
    }; 

    for (var i = 0; i < imageCount; i++) { 
    var img = new Image(); 
    img.onload = onload; 
    img.onerror = onerror; 
    img.src = myImages[i]; 
    } 
})(); 

Answer 4

Se si desidera chiamare una funzione quando tutte le immagini vengono caricate, è possibile provare a seguire, ha funzionato per me

var imageCount = images.length; 
var imagesLoaded = 0; 

for(var i=0; i<imageCount; i++){ 
    images[i].onload = function(){ 
     imagesLoaded++; 
     if(imagesLoaded == imageCount){ 
      allLoaded(); 
     } 
    } 
} 

function allLoaded(){ 
    drawImages(); 
}