Testen Sie, ob alle Bilder

Question

hier geladen werden, ist mein Versuch, die Fähigkeit zu testen, ob alle Bilder geladen sind:

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. 
    } 
} 

Das Problem ist, dass, sobald die Schleife fertig ist, wird die Variable iimgCount ist. Das bedeutet, dass alle anderen "geladenen" Flags nie auf true gesetzt werden, wenn ihre Bilder geladen sind.

Gibt es eine Möglichkeit, einem Bild eine "geladene" Eigenschaft hinzuzufügen, oder gibt es eine Umgehungsmöglichkeit für dieses Problem?

Answer 1

Sie benötigen die onload-Funktion mit einem Verschluss zu definieren:

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

Hier ein jsFiddle sind, die diese Arbeit in einem ähnlichen Szenario zeigt.

Beachten Sie auch, dass die Lösung, die Sie zur Zeit als Antwort ausgewählt haben, nicht wirklich funktionieren:

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

Diese Funktion sofort ausgewertet wird. Das bedeutet, dass in der Schleife jedes Element von loadArr auf "true" gesetzt ist, wie es beim onload-Ereignis der Fall ist. Dieser Code ist funktional identisch mit:

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

Answer 2

Sie müssen den Indexwert für anonyme Funktion wie diese passieren,

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

Aus diesem Grund Verschlüsse gemacht wurden! Ihre Schleife wird fast sofort ausgeführt und endet lange bevor das erste Bild geladen wird. Also i == imgCount sofort, "überspringen" alle anderen Werte. Verschlüsse können dies vermeiden und jeden Wert von i für ein bestimmtes Bild beeinflussen.

Aber in Ihrem Fall würde ich tatsächlich ein "geladenes" Attribut zu jedem Bild hinzufügen.

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