Rileva più eventi di caricamento di immagini

Question

Mi chiedo se esiste un modo per rilevare l'evento di caricamento di più immagini (in particolare, una funzione deve essere eseguita quando l'ultima immagine in un determinato set ha completato il caricamento).

Ad esempio, un utente fa clic su un collegamento e viene visualizzato lighbox con 10 immagini. Quando tutte le immagini sono state caricate, la barra di caricamento dovrebbe scomparire.

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

Questo innesca purtroppo hideLoadingBar(); troppo presto (dopo una sola immagine ha completato il caricamento).

P.S.
Ho anche bisogno della mia funzione per funzionare dopo che le immagini sono state memorizzate nella cache così: jQuery('#img1, #img2').load(); non funzionerà.

Answer 1

Dai un'occhiata a questo plug-in jQuery imagesLoaded, dovrebbe essere adatto alle tue esigenze.

Answer 2

Bene, sembra che nessuno abbia un'idea migliore, quindi di seguito è la mia soluzione/soluzione alternativa. L'altra risposta a questa domanda è probabilmente quello che si desidera utilizzare, perché è una libreria creata appositamente per questo, ma qui è la soluzione che ho intenzione di usare, perché è più breve e semplice:

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

Opere per le immagini memorizzate nella cache e immagini non memorizzate nella cache.