jquery callback after all images in dom are loaded?
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);
}
});
});
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.