Quantcast
Viewing latest article 15
Browse Latest Browse All 29

All Images Loaded (imagesLoaded)

*NOTE* this code causes infinite loops in IE with image load errors, so I improved and turned this into a real plugin and hosted it on github.


A little jQuery function that checks if all images are loaded. If they all are, the callback function is called. Check out the latest version in this gist.

Script below:
/*
Check if all images are loaded
- Callback occurs when all images are loaded
- image load errors are ignored (complete will be true)
- Use:
$('.wrap img').imagesLoaded(function(){
alert('all images loaded');
});
*/

jQuery.fn.extend({
imagesLoaded: function( callback ) {
var i, c = true, t = this, l = t.length;
for ( i = 0; i < l; i++ ) {
if (this[i].tagName === "IMG") {
c = (c && this[i].complete && this[i].height !== 0);
}
}
if (c) {
if (typeof callback === "function") { callback(); }
} else {
setTimeout(function(){
jQuery(t).imagesLoaded( callback );
}, 200);
}
}
});

Use it as follows:
$(function(){
$('.wrap img').imagesLoaded(function(){
alert('all images loaded');
});
});

Viewing latest article 15
Browse Latest Browse All 29

Trending Articles