imagesLoaded

JavaScript is all like "You images done yet or what?"

imagesloaded.desandro.com

Detect when images have been loaded.

Install

Download

• imagesloaded.pkgd.min.js minified
• imagesloaded.pkgd.js un-minified

CDN

1<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
2<!-- or -->
3<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>

Package managers

Install via npm: npm install imagesloaded

Install via Yarn: yarn add imagesloaded

jQuery

You can use imagesLoaded as a jQuery Plugin.

1$('#container').imagesLoaded( function() {
2  // images have loaded
3});
4
5// options
6$('#container').imagesLoaded( {
7  // options...
8  },
9  function() {
10    // images have loaded
11  }
12);

.imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress().

1$('#container').imagesLoaded()
2  .always( function( instance ) {
3    console.log('all images loaded');
4  })
5  .done( function( instance ) {
6    console.log('all images successfully loaded');
7  })
8  .fail( function() {
9    console.log('all images loaded, at least one is broken');
10  })
11  .progress( function( instance, image ) {
12    var result = image.isLoaded ? 'loaded' : 'broken';
13    console.log( 'image is ' + result + ' for ' + image.img.src );
14  });

Vanilla JavaScript

You can use imagesLoaded with vanilla JS.

1imagesLoaded( elem, callback )
2// options
3imagesLoaded( elem, options, callback )
4// you can use `new` if you like
5new imagesLoaded( elem, callback )

• elem Element, NodeList, Array, or Selector String
• options Object
• callback 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).

1// element
2imagesLoaded( document.querySelector('#container'), function( instance ) {
3  console.log('all images are loaded');
4});
5// selector string
6imagesLoaded( '#container', function() {...});
7// multiple elements
8var posts = document.querySelectorAll('.post');
9imagesLoaded( posts, function() {...});

Bind events with vanilla JS with .on(), .off(), and .once() methods.

1var imgLoad = imagesLoaded( elem );
2function onAlways( instance ) {
3  console.log('all images are loaded');
4}
5// bind with .on()
6imgLoad.on( 'always', onAlways );
7// unbind with .off()
8imgLoad.off( 'always', onAlways );

Background

Detect when background images have loaded, in addition to <img>s.

Set { background: true } to detect when the element's background image has loaded.

1// jQuery
2$('#container').imagesLoaded( { background: true }, function() {
3  console.log('#container background image loaded');
4});
5
6// vanilla JS
7imagesLoaded( '#container', { background: true }, function() {
8  console.log('#container background image loaded');
9});

See jQuery demo or vanilla JS demo on CodePen.

Set to a selector string like { background: '.item' } to detect when the background images of child elements have loaded.

1// jQuery
2$('#container').imagesLoaded( { background: '.item' }, function() {
3  console.log('all .item background images loaded');
4});
5
6// vanilla JS
7imagesLoaded( '#container', { background: '.item' }, function() {
8  console.log('all .item background images loaded');
9});

See jQuery demo or vanilla JS demo on CodePen.

Events

always

1// jQuery
2$('#container').imagesLoaded().always( function( instance ) {
3  console.log('ALWAYS - all images have been loaded');
4});
5
6// vanilla JS
7imgLoad.on( 'always', function( instance ) {
8  console.log('ALWAYS - all images have been loaded');
9});

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

• instance imagesLoaded - the imagesLoaded instance

done

1// jQuery
2$('#container').imagesLoaded().done( function( instance ) {
3  console.log('DONE  - all images have been successfully loaded');
4});
5
6// vanilla JS
7imgLoad.on( 'done', function( instance ) {
8  console.log('DONE  - all images have been successfully loaded');
9});

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

fail

1$('#container').imagesLoaded().fail( function( instance ) {
2  console.log('FAIL - all images loaded, at least one is broken');
3});
4
5// vanilla JS
6imgLoad.on( 'fail', function( instance ) {
7  console.log('FAIL - all images loaded, at least one is broken');
8});

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

progress

1imgLoad.on( 'progress', function( instance, image ) {
2  var result = image.isLoaded ? 'loaded' : 'broken';
3  console.log( 'image is ' + result + ' for ' + image.img.src );
4});

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 successfully loaded

imagesLoaded.images

Array of LoadingImage instances for each image detected

1var imgLoad = imagesLoaded('#container');
2imgLoad.on( 'always', function() {
3  console.log( imgLoad.images.length + ' images loaded' );
4  // detect which image is broken
5  for ( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
6    var image = imgLoad.images[i];
7    var result = image.isLoaded ? 'loaded' : 'broken';
8    console.log( 'image is ' + result + ' for ' + image.img.src );
9  }
10});

Webpack

Install imagesLoaded with npm.

1npm install imagesloaded

You can then require('imagesloaded').

1// main.js
2var imagesLoaded = require('imagesloaded');
3
4imagesLoaded( '#container', function() {
5  // images have loaded
6});

Use .makeJQueryPlugin to make .imagesLoaded() jQuery plugin.

1// main.js
2var imagesLoaded = require('imagesloaded');
3var $ = require('jquery');
4
5// provide jQuery argument
6imagesLoaded.makeJQueryPlugin( $ );
7// now use .imagesLoaded() jQuery plugin
8$('#container').imagesLoaded( function() {...});

Run webpack.

1webpack main.js bundle.js

Browserify

imagesLoaded works with Browserify.

1npm install imagesloaded --save

1var imagesLoaded = require('imagesloaded');
2
3imagesLoaded( elem, function() {...} );

Use .makeJQueryPlugin to make to use .imagesLoaded() jQuery plugin.

1var $ = require('jquery');
2var imagesLoaded = require('imagesloaded');
3
4// provide jQuery argument
5imagesLoaded.makeJQueryPlugin( $ );
6// now use .imagesLoaded() jQuery plugin
7$('#container').imagesLoaded( function() {...});

Browser support

• Chrome 49+
• Firefox 41+
• Edge 14+
• iOS Safari 8+

Use imagesLoaded v4 for Internet Explorer and other older browser support.

Development

Development uses Node.js v16 with npm v8

1nvm use

MIT License

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