jQuery Plugin For Detecting Image Have Been Loaded - imagesLoaded

imagesLoaded is a useful jQuery & Vanilla JavaScript plugin for detecting and checking if images within the container have been loaded and then triggering events for further actions.

Cross platform and mobile friendly. Supports both img tag and background images.

Related plugins:

• jQuery Plugin For Checking Content Has Been Loaded - is loading
• jQuery Plugin For Preloading Images With Javascript - imageloader

How to use it:

1. Load the imagesLoaded library from the CDN.

<!-- jQuery is optional -->
<script src="jquery.min.js"></script>
<!-- Minified Version -->
<script src="https://unpkg.com/imagesloaded@latest/imagesloaded.pkgd.min.js"></script>

2. Detect if all the images have been loaded in the container you specify.

// jQuery
$('.myContainer').imagesLoaded({
  // options here
}, function() {
  // do something after loaded
});

// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'), {
  // options here
}, function() {
  // do something after loaded
});

$('#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 + );
  });

3. Detect the loading of background images.

// jQuery
$('.myContainer').imagesLoaded({
  background: true
}, function() {
  // do something after loaded
});

// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'), {
  background: true
}, function() {
  // do something after loaded
});

4. Event handlers.

// jQuery
$('.myContainer').imagesLoaded()
.always( function( instance ) {
  // fired after all images are loaded
})
.done( function( instance ) {
  // fired after all images are successfully loaded
})
.fail( function() {
  // fired after all images are 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 );
});

// Vanilla JavaScript
imagesLoaded(document.querySelector('.myContainer'))
on('always', function( instance ) {
  // fired after all images are loaded
})
on('done', function( instance ) {
  // fired after all images are successfully loaded
})
on('fail', function( instance ) {
  // fired after all images are loaded, at least one is broken
})
on('progress', function( instance, image ) {
  var result = image.isLoaded ? 'loaded' : 'broken';
  console.log( 'image is ' + result + ' for ' + image.img.src );
});

Changelog:

v5.0.0 (2022-07-04)

• ES6, drop IE

v4.1.4 (2019-07-05)

• version update
• doc update

v4.1.1 (2016-08-28)

• version update

---

This awesome jQuery plugin is developed by desandro. For more Advanced Usages, please check the demo page or visit the official website.