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

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.