jquery callback after all images in dom are loaded?

Question

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

Answer 1

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

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

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

Answer 2

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.

Answer 3

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