How to detect images loaded – imagesLoaded jQuery plugin

How to detect images loaded? There are various ways.

We can use imagesLoaded as a jQuery Plugin, but also with Vanilla JS, Browserify, Webpack, and more

We want to have the best experiences in our web projects. Especially about images loading. There is a proven solution for JS.

Browser support: IE9+, Android 2.3+, iOS Safari 4+, and all other modern browsers.

jQuery Plugin For Detecting Image Have Been Loaded - imagesLoaded
jQuery Plugin For Detecting Image Have Been Loaded – imagesLoaded

Setup

Via npm

npm install imagesloaded

Via Bower

bower install imagesloaded --save

Example 1

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

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

// ...

Note: .imagesLoaded() returns a jQuery Deferred object, so we can use .always(), .done(), .fail() and .progress() methods and create best-in-class experiences.

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

Example 2 – an 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 );
  }
});

Browserify way

npm install imagesloaded --save
var imagesLoaded = require('imagesloaded');
imagesLoaded( elem, function() {...} );

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

var $ = require('jquery');
var imagesLoaded = require('imagesloaded');

// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});


It works also with webpack!

npm install imagesloaded
// main.js
var imagesLoaded = require('imagesloaded');

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

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

// main.js
var imagesLoaded = require('imagesloaded');
var $ = require('jquery');

// provide jQuery argument
imagesLoaded.makeJQueryPlugin( $ );
// now use .imagesLoaded() jQuery plugin
$('#container').imagesLoaded( function() {...});

Run webpack:

webpack main.js bundle.js

License: MIT

Homepage

https://imagesloaded.desandro.com/

GitHub

https://github.com/desandro/imagesloaded

scraperapi

See also

JavaScript file upload library – filepond JS, with adapters for Vue and React JS!

Simple responsive JavaScript charts – Chartist.js

JavaScript SVG animation library – Vivus.js

Flickr-like justified photo gallery – jQuery Justified.js

Responsive ReactJS carousel gallery: react-image-gallery

Detect mobile in JavaScript – Vue.js example

Enjoy!