imagesLoaded

desandro.github.io/imagesloaded

Detect when images have been loaded.

Install

Get a packaged source file from desandro.github.io/imagesloaded or install via Bower

bower install imagesloaded

Usage

ImagesLoaded( elem, callback )
// you can use `new` if you like
new ImagesLoaded( elem, callback )

• elem Element, NodeList, Array, or Selector String
• callback Function - function triggered after all images have been loaded

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

Events

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

always

imgLoad.on( 'always', function( instance ) {
  console.log('all images have been loaded');
});

Triggered after all images have been either loaded or confirmed broken.

• instance ImagesLoaded - the ImagesLoaded instance

done

imgLoad.on( 'done', function( instance ) {
  console.log('all images have been successfully loaded');
});

Triggered after all images have successfully loaded without any broken images.

fail

imgLoad.on( 'done', function( instance ) {
  console.log('all images loaded, at least one is broken');
});

Triggered after all images have been loaded with at least one broken image.

progress

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 instance
• image LoadingImage - the LoadingImage instance of the loaded image

Properties

LoadingImage.img

Image - The img element

LoadingImage.isLoaded

Boolean - true when the image has succesfully loaded

ImagesLoaded.images

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

jQuery

If you include jQuery, ImagesLoaded can be used as a jQuery Plugin.

$('#container').imagesLoaded( function() {
  // images have loaded
});

jQuery Deferred

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

MIT License

ImagesLoaded is released under the MIT License. Have at it.