Sprawdź, czy wszystkie obrazy są ładowane

Question

Oto moja próba zdolności do sprawdzenia, czy wszystkie obrazy są ładowane:

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

Problem polega na tym, że gdy pętla jest wykonywana, zmienna i jest imgCount. Oznacza to, że wszystkie inne "załadowane" flagi nigdy nie zostaną ustawione na true, gdy ich obrazy zostaną załadowane.

Czy istnieje jakiś sposób dodania "załadowanej" właściwości do obrazu lub czy jest jakiś sposób obejścia tego problemu?

Answer 1

Musisz zdefiniować funkcję onload stosując zamknięcie:

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

Oto jsFiddle który demonstruje to w pracy na podobnym scenariuszu.

Należy również pamiętać, że rozwiązanie masz aktualnie wybrany jako odpowiedź faktycznie nie działa:

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

Ta funkcja jest natychmiast oceniany. Oznacza to, że w pętli każdy element loadArr ma wartość true, tak jak zdarzenie onload. Że kod jest funkcjonalnie identyczne:

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

Answer 2

Musisz przekazać wartość indeksu do anonimowej funkcji takich jak to,

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

Dlatego zamknięcia zostały wykonane! Twoja pętla działa prawie natychmiast, a kończy się na długo przed załadowaniem pierwszego obrazu. Więc i == imgCount od razu "pomijam" wszystkie inne wartości. Zamknięcia mogą tego uniknąć i wpływać na każdą wartość i na odrębny obraz.

Jednak w twoim przypadku naprawdę dodałem atrybut "załadowany" do każdego obrazu.

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