JavaScript is all like "You images done yet or what?"
desandro.github.io/imagesloaded
Detect when images have been loaded.
Get a packaged source file:
Or install via Bower:
bower install imagesloaded
imagesLoaded( elem, callback )
// you can use `new` if you like
new imagesLoaded( elem, callback )
elem
Element, NodeList, Array, or Selector Stringcallback
Function - function triggered after all images have been loaded
Using a callback function is the same as binding it to the always
event (see below).
// element
imagesLoaded( document.querySelector('#container'), function( instance ) {
console.log('all images are loaded');
});
// selector string
imagesLoaded( '#container', function() {...});
// multiple elements
var posts = document.querySelectorAll('.post');
imagesLoaded( posts, function() {...});
imagesLoaded is an Event Emitter. You can bind event listeners to events.
var imgLoad = imagesLoaded( elem );
function onAlways( instance ) {
console.log('all images are loaded');
}
// bind with .on()
imgLoad.on( 'always', onAlways );
// unbind with .off()
imgLoad.off( 'always', onAlways );
imgLoad.on( 'always', function( instance ) {
console.log('ALWAYS - all images have been loaded');
});
Triggered after all images have been either loaded or confirmed broken.
instance
imagesLoaded - the imagesLoaded instance
imgLoad.on( 'done', function( instance ) {
console.log('DONE - all images have been successfully loaded');
});
Triggered after all images have successfully loaded without any broken images.
imgLoad.on( 'fail', function( instance ) {
console.log('FAIL - all images loaded, at least one is broken');
});
Triggered after all images have been loaded with at least one broken image.
imgLoad.on( 'progress', function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
});
Triggered after each image has been loaded.
instance
imagesLoaded - the imagesLoaded instanceimage
LoadingImage - the LoadingImage instance of the loaded image
Image - The img
element
Boolean - true
when the image has succesfully loaded
Array of LoadingImage instances for each image detected
var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
console.log( imgLoad.images.length + ' images loaded' );
// detect which image is broken
for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
var image = imgLoad.images[i];
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src + );
}
});
If you include jQuery, imagesLoaded can be used as a jQuery Plugin.
$('#container').imagesLoaded( function() {
// images have loaded
});
The jQuery plugin returns a jQuery Deferred object. This allows you to use .always()
, .done()
, .fail()
and .progress()
, similarly to the emitted events.
$('#container').imagesLoaded()
.always( function( instance ) {
console.log('all images loaded');
})
.done( function( instance ) {
console.log('all images successfully loaded');
})
.fail( function() {
console.log('all images loaded, at least one is broken');
})
.progress( function( instance, image ) {
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src + );
});
This project has a storied legacy. Its current incarnation was developed by Tomas Sardyha @Darsain and David DeSandro @desandro.
imagesLoaded is released under the MIT License. Have at it.