callback jquery depois que todas as imagens em dom são carregadas?

Como posso triggersr um evento quando todas as imagens no DOM são carregadas? Eu pesquisei muito. Eu encontrei isso, mas parece não funcionar:

evento jQuery para imagens carregadas

Use o método load() (docs) na window .

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

Ou apenas faça isso diretamente via window.onload .

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

Se você quiser que um evento separado seja acionado para cada imagem, coloque um .load() em cada imagem.

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

Ou se houver uma chance de uma imagem ser armazenada em cache, faça o seguinte:

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

EDITAR:

Para executar alguma ação após o carregamento da última imagem, use um contador definido no número total de imagens e diminua cada vez que um manipulador de carga for chamado.

Quando atinge 0 , execute algum outro código.

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

Um problema que tive com a solução editada de user113716 é que uma imagem quebrada impedirá que o contador chegue a 0. Isso corrigiu isso para mim.

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

Abaixo está o que eu inventei, usando objects adiados e $.when invés de usar um contador.

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

Deixe-me saber se há alguma ressalva.