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

Question

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

jQuery event for images loaded

Answer 1

utilizzare il metodo load()^(docs) contro il window.

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

Oppure basta farlo direttamente tramite window.onload.

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

---

Se si desidera un evento separato al fuoco per ogni immagine, posizionare un .load() su ogni immagine.

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

O se c'è una possibilità di un'immagine può essere memorizzata nella cache, fare questo:

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

---

EDIT:

Al fine di eseguire alcune azioni dopo il caricamento 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, eseguire 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); 
     } 
    }); 
}); 

Answer 2

Un problema che ho incontrato con la soluzione modificato di user113716 è che un'immagine rotto manterrà il contatore dal mai raggiungere 0. Questo ha risolto il tutto per me.

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

Answer 3

Qui di seguito è quello che mi è venuta, utilizzando differite oggetti e $.when invece di utilizzare 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.