imagesloaded.desandro.comimagesLoaded - Detect when images have been loaded

JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. on GitHub 4,500 Demo Install jQuery Vanilla JavaScript Background Events Sponsored by Metafizzy Properties Webpack Browserify Browser support Development MIT License Demo Add images Reset demo Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDNscript src = "https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"/ script! or script src = "https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"/ scriptPackage managers Install via npm: npm install imagesloaded Install via Yarn: yarn add imagesloaded jQuery You can use as a jQuery Plugin. $( ’#container’ ). ( function ( ) { // images have loaded }); // options $( ’#container’ ). ( { // options... }, function ( ) { // images have loaded } ); .() returns a jQuery Deferred object . This allows you to use .always() , .done() , .fail() and .progress() . $( ’#container’ ). () . 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 ); }); Vanilla JavaScript You can use with vanilla JS. ( elem, callback ) // options ( elem, options, callback ) // you can use `new` if you like new ( 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). // element ( document . querySelector ( ’#container’ ), function ( instance ) { console . log ( ’all images are loaded’ ); }); // selector string ( ’#container’ , function ( ) {...}); // multiple elements var posts = document . querySelectorAll ( ’.post’ ); ( posts, function ( ) {...}); Bind events with vanilla JS with .on(), .off(), and .once() methods. var imgLoad = ( elem ); function onAlways ( instance ) { console . log ( ’all images are loaded’ ); } // bind with .on() imgLoad . on ( ’always’ , onAlways ); // unbind with .off() imgLoad . 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. // jQuery $( ’#container’ ). ( { background : true }, function ( ) { console . log ( ’#container background image loaded’ ); }); // vanilla JS ( ’#container’ , { background : true }, function ( ) { console . log ( ’#container background image loaded’ ); }); 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. // jQuery $( ’#container’ ). ( { background : ’.item’ }, function ( ) { console . log ( ’all .item background images loaded’ ); }); // vanilla JS ( ’#container’ , { background : ’.item’ }, function ( ) { console . log ( ’all .item background images loaded’ ); }); See jQuery demo or vanilla JS demo on CodePen. Events always // jQuery $( ’#container’ ). (). always ( function ( instance ) { console . log ( ’ALWAYS - all images have been loaded’ ); }); // vanilla JS 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 - the instance done // jQuery $( ’#container’ ). (). done ( function ( instance ) { console . log ( ’DONE - all images have been successfully loaded’ ); }); // vanilla JS 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. fail $( ’#container’ ). (). fail ( function ( instance ) { console . log ( ’FAIL - all images loaded, at least one is broken’ ); }); // vanilla JS 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. 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 - the instance image LoadingImage - the LoadingImage instance of the loaded image Sponsored by Metafizzy Development on is sponsored by Metafizzy . Metafizzy makes delightful UI libraries that use : Isotope Filter & sort magical layouts Flickity Touch, responsive, flickable galleries Packery Gap-less, draggable, bin-packing layout library Properties LoadingImage.img Image - The img element LoadingImage.isLoaded Boolean - true when the image has successfully loaded .images Array of LoadingImage instances for each image detected var imgLoad = ( ’#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 ; ilen; i++ ) { var image = imgLoad . images [i]; var result = image. isLoaded ? ’loaded’ : ’broken’ ; console . log ( ’image is ’ + result + ’ for ’ + image. img . src ); } }); Webpack Install with npm. npm install imagesloaded You can then require(’imagesloaded’) . // main.js var = require ( ’imagesloaded’ ); ( ’#container’ , function ( ) { // images have loaded }); Use .makeJQueryPlugin to make .() jQuery plugin. // main.js var = require ( ’imagesloaded’ ); var $ = require ( ’jquery’ ); // provide jQuery argument . makeJQueryPlugin ( $ ); // now use .() jQuery plugin $( ’#container’ ). ( function ( ) {...}); Run webpack. webpack main.js bundle.js Browserify works with Browserify . npm install imagesloaded save var = require ( ’imagesloaded’ ); ( elem, function ( ) {...} ); Use .makeJQueryPlugin to make to use .() jQuery plugin. var $ = require ( ’jquery’ ); var = require ( ’imagesloaded’ ); // provide jQuery argument . makeJQueryPlugin ( $ ); // now use .() jQuery plugin $( ’#container’ ). ( function ( ) {...}); Browser support Chrome 49+ Firefox 41+ Edge 14+ iOS Safari 8+ Use v4 for Internet Explorer and other older browser support. Development Development uses Node.js v16 with npm v8 nvm use MIT License is released under the MIT License . Have at...