Wykryj zdarzenie ładowania wielu obrazów

Question

Zastanawiam się, czy istnieje sposób na wykrycie zdarzenia związanego z ładowaniem wielu obrazów (w szczególności funkcja powinna być wykonywana po zakończeniu ładowania ostatniego obrazu w danym zestawie).

Na przykład użytkownik klika łącze, a lighbox wyświetla się z 10 obrazami. Po załadowaniu wszystkich obrazów pasek ładowania powinien zniknąć.

jQuery(".lightbox-image").each(function(){ 
    var image = jQuery(this); 
    jQuery('<img />').attr('src', image.attr('src')).load(function(){ 
     hideLoadingBar(); 
    }); 
}); 

To niestety powoduje hideLoadingBar(); zbyt wcześnie (po jednym zdjęciu zakończeniu ładowania).

P.S.
Potrzebuję również mojej funkcji do pracy po zapisaniu obrazów w pamięci podręcznej, więc: jQuery('#img1, #img2').load(); nie będzie działać.

Answer 1

Sprawdź tę wtyczkę jQuery imagesLoaded, która powinna pasować do Twoich potrzeb.

Answer 2

Cóż, wygląda na to, że nikt nie ma lepszego pomysłu, więc poniżej znajduje się moje rozwiązanie/obejście. Druga odpowiedź na to pytanie jest chyba to, co chcesz używać, ponieważ jest to biblioteka stworzona specjalnie z myślą o tym, ale tu jest rozwiązanie, które mam zamiar używać, ponieważ jest krótszy i prosty:

var allImages = jQuery(".lightbox-image").length; 
var counter = 0; 
jQuery(".lightbox-image").each(function(){ 
    var image = jQuery(this).find('.myimage'); 
    jQuery('<img />').attr('src', image.attr('src')).load(function(){ 
     counter++; 
     if(counter >= allImages){ 
      hideLoadingBar(); 
     } 
    }); 
}); 

Works z pamięci podręcznej obrazów i nie obrazy w pamięci podręcznej.