referencia - string[] jquery

jquery callback 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 parece que no funciona:

Evento jQuery para imágenes cargadas

Answer 1

A continuación se muestra lo que se me ocurrió, el uso de objetos diferidos y $.when 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 alguna advertencia.

Answer 2

Un problema que encontré con la solución editada de user113716 es que una imagen rota evitará que el contador llegue a 0. Esto lo solucionó.

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

Answer 3

Use el método 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 desea que un evento separado se .load() para cada imagen, coloque un .load() en cada imagen.

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

O si existe la posibilidad de que una imagen se guarde en la memoria caché, haga esto:

$(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 realizar alguna acción después de que se cargue 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 llega a 0 , ejecuta 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);
        }
    });
});