test se tutte le immagini sono caricate

Question

Qui è il mio tentativo della possibilità di verificare se tutte le immagini vengono caricate:

for (var i = 0; i < imgCount; i ++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src='img'+i+'.png' 
    imgArr[i].onload = function() { 
     loadArr[i] = true //but wait! At the end of 
          //the loop, i is imgCount 
          //so this doesn't work. 
    } 
} 

Il problema è che una volta che il ciclo è fatto, la variabile è iimgCount. Ciò significa che tutte le altre bandiere "caricate" non vengono mai impostate su true quando le loro immagini vengono caricate.

C'è un modo per aggiungere una proprietà "caricata" a un'immagine, o c'è qualche soluzione per questo problema?

Answer 1

è necessario definire la funzione onload con una chiusura:

for (var i = 0; i < imgCount; i ++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src='img'+i+'.png' 
    imgArr[i].onload = (function(i){ 
     return function(){ loadArr[i] = true } 
    })(i); 
} 

Ecco un jsFiddle che dimostra questo lavoro in uno scenario simile.

Si noti inoltre che la soluzione che attualmente selezionata come la risposta in realtà non funziona:

imgArr[i].onload = (function() { 
     loadArr[i] = true; 
    })(); 

Questa funzione viene valutata immediatamente. Ciò significa che nel ciclo ogni elemento di loadArr è impostato su true così come l'evento onload. Questo codice è funzionalmente identico a:

imgArr[i].onload = loadArr[i] = true; 

Answer 2

È necessario passare il valore di indice di funzione anonima come questo,

for (var i = 0; i < imgCount; i++) { 
    loadArr[i] = false 
    imgArr[i] = new Image() 
    imgArr[i].src = 'img' + i + '.png' 
    imgArr[i].onload = function (index) { 
     return function() { 
      loadArr[index] = true //but wait! At the end of 
      //the loop, i is imgCount 
      //so this doesn't work. 
     }; 
    }(i); 
} 

Answer 3

Questo è il motivo per cui le chiusure sono state fatte! Il tuo loop viene eseguito quasi istantaneamente e termina molto prima che venga caricata la prima immagine. Così ho == imgCount subito, "saltando" tutti gli altri valori. Le chiusure possono evitarlo e influire su ciascun valore di i su un'immagine distinta.

Tuttavia, nel tuo caso, aggiungerei effettivamente un attributo "caricato" a ciascuna immagine.

// Construct your image array 
for (var i = 0; i < imgCount; i++) { 
    imgArr[i] = new Image(); 
    imgArr[i].src='img'+i+'.png'; 
} 

//Then iterate over the array, adding a 'loaded' attribute when it occurs 
imgArr.each(function(){ 
    $(this).onload(function() { 
     $(this).attr('loaded','true'); 
    }); 
}