jquery de devolución de llamada después de cargar todas las imágenes en dom?

Question

¿Cómo puedo disparar un evento cuando todas las imágenes en el DOM están cargadas? He buscado mucho en Google. He encontrado esto, pero no parece funcionar:

jQuery event for images loaded

Answer 1

utilizar el método de load()^(docs) contra la window.

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

O simplemente hazlo directamente a través de window.onload.

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

---

Si quieres un evento separado al fuego para cada imagen, coloque una .load() en cada imagen.

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

O si hay una posibilidad de una imagen puede ser almacenado en caché, haga lo siguiente:

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

---

EDIT:

Con el fin de realizar alguna acción tras la carga de la última imagen , utilice un contador establecido en el número total de imágenes y disminuya cada vez que se llame a un manejador de carga.

Cuando llegue a 0, ejecute otro 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); 
     } 
    }); 
}); 

Answer 2

Una cuestión me encontré con una solución editada de user113716 es que una imagen rota mantendrá el contador nunca lleguen a 0. Esto lo fijó para mí.

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

Answer 3

continuación es lo que me ocurrió, utilizando diferidos objetos y $.when en lugar de utilizar un 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 */ 
}); 

Avísame si hay advertencias.