Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
jquery callback after all images in dom are loaded?

How can I fire an event when all images in the DOM are loaded? I've googled a lot. I've found this, but it doesn't seem to work:

jQuery event for images loaded

over 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Use the load()(docs) method against the window.

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

Note: On newer jQuery versions use $(window).on('load', function(){ ...});

Or just do it directly via window.onload .

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

If you want a separate event to fire for each image, place a .load() on each image.

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

Or if there's a chance an image may be cached, do this:

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

EDIT:

In order to perform some action after the last image loads, use a counter set at the total number of images, and decrement each time a load handler is called.

When it reaches 0, run some other code.

$(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);
        }
    });
});
over 4 years ago · Santiago Trujillo Denunciar

0

Below is what I came up with, using deferred objects and $.when instead of using a counter.

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

Let me know if there is any caveats.

over 4 years ago · Santiago Trujillo Denunciar

0

One issue I ran into with user113716's edited solution is that a broken image will keep the counter from ever reaching 0. This fixed it for me.

.error(function(){
  imageLoaded();
  $(this).hide();
});
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda