callback jquery dopo che tutte le immagini in dom sono state caricate?

Come posso triggersre un evento quando vengono caricate tutte le immagini nel DOM? Ho cercato su Google molto. Ho trovato questo, ma non sembra funzionare:

evento jQuery per immagini caricate

Usa il metodo load() (docs) contro la window .

 $(window).load(function() { // this will fire after the entire page is loaded, including images }); 

O fallo direttamente tramite window.onload .

 window.onload = function() { // this will fire after the entire page is loaded, including images }; 

Se vuoi .load() un evento separato per ogni immagine, .load() un .load() su ogni immagine.

 $(function() { $('img').one('load',function() { // fire when image loads }); }); 

Oppure, se è ansible che un’immagine venga memorizzata nella cache, procedi nel seguente modo:

 $(function() { function imageLoaded() { // function to invoke for loaded image } $('img').each(function() { if( this.complete ) { imageLoaded.call( this ); } else { $(this).one('load', imageLoaded); } }); }); 

MODIFICARE:

Per eseguire un’azione dopo il caricamento dell’ultima immagine, utilizzare un contatore impostato sul numero totale di immagini e decrementare ogni volta che viene richiamato un gestore di carico.

Quando raggiunge 0 , esegui un altro codice.

 $(function() { function imageLoaded() { // function to invoke for loaded image // decrement the counter counter--; if( counter === 0 ) { // counter is 0 which means the last // one loaded, so do something else } } var images = $('img'); var counter = images.length; // initialize the counter images.each(function() { if( this.complete ) { imageLoaded.call( this ); } else { $(this).one('load', imageLoaded); } }); }); 

Un problema che ho incontrato con la soluzione modificata di user113716 è che l’immagine rotta manterrà il contatore da zero fino a raggiungere lo zero. Questo l’ha risolto per me.

 .error(function(){ imageLoaded(); $(this).hide(); }); 

Di seguito è quello che mi è venuto in mente, utilizzando gli oggetti posticipati e $.when invece di usare un contatore.

 var deferreds = []; $('img').each(function() { if (!this.complete) { var deferred = $.Deferred(); $(this).one('load', deferred.resolve); deferreds.push(deferred); } }); $.when.apply($, deferreds).done(function() { /* things to do when all images loaded */ }); 

Fammi sapere se c’è qualche avvertimento.