- Notifications
You must be signed in to change notification settings - Fork1.1k
📷 JavaScript is all like "You images done yet or what?"
License
desandro/imagesloaded
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
JavaScript is all like "You images done yet or what?"
Detect when images have been loaded.
- imagesloaded.pkgd.min.js minified
- imagesloaded.pkgd.js un-minified
<scriptsrc="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script><!-- or --><scriptsrc="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>
Install via npm:npm install imagesloaded
Install via Yarn:yarn add imagesloaded
You can use imagesLoaded as a jQuery Plugin.
$('#container').imagesLoaded(function(){// images have loaded});// options$('#container').imagesLoaded({// options...},function(){// images have loaded});
.imagesLoaded() returns ajQuery Deferred object. This allows you to use.always(),.done(),.fail() and.progress().
$('#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){varresult=image.isLoaded ?'loaded' :'broken';console.log('image is '+result+' for '+image.img.src);});
You can use imagesLoaded with vanilla JS.
imagesLoaded(elem,callback)// optionsimagesLoaded(elem,options,callback)// you can use `new` if you likenewimagesLoaded(elem,callback)
elemElement, NodeList, Array, or Selector StringoptionsObjectcallbackFunction - function triggered after all images have been loaded
Using a callback function is the same as binding it to thealways event (see below).
// elementimagesLoaded(document.querySelector('#container'),function(instance){console.log('all images are loaded');});// selector stringimagesLoaded('#container',function(){...});// multiple elementsvarposts=document.querySelectorAll('.post');imagesLoaded(posts,function(){...});
Bind events with vanilla JS with .on(), .off(), and .once() methods.
varimgLoad=imagesLoaded(elem);functiononAlways(instance){console.log('all images are loaded');}// bind with .on()imgLoad.on('always',onAlways);// unbind with .off()imgLoad.off('always',onAlways);
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').imagesLoaded({background:true},function(){console.log('#container background image loaded');});// vanilla JSimagesLoaded('#container',{background:true},function(){console.log('#container background image loaded');});
See jQuery demo orvanilla 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').imagesLoaded({background:'.item'},function(){console.log('all .item background images loaded');});// vanilla JSimagesLoaded('#container',{background:'.item'},function(){console.log('all .item background images loaded');});
See jQuery demo orvanilla JS demo on CodePen.
// jQuery$('#container').imagesLoaded().always(function(instance){console.log('ALWAYS - all images have been loaded');});// vanilla JSimgLoad.on('always',function(instance){console.log('ALWAYS - all images have been loaded');});
Triggered after all images have been either loaded or confirmed broken.
instanceimagesLoaded - the imagesLoaded instance
// jQuery$('#container').imagesLoaded().done(function(instance){console.log('DONE - all images have been successfully loaded');});// vanilla JSimgLoad.on('done',function(instance){console.log('DONE - all images have been successfully loaded');});
Triggered after all images have successfully loaded without any broken images.
$('#container').imagesLoaded().fail(function(instance){console.log('FAIL - all images loaded, at least one is broken');});// vanilla JSimgLoad.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.
imgLoad.on('progress',function(instance,image){varresult=image.isLoaded ?'loaded' :'broken';console.log('image is '+result+' for '+image.img.src);});
Triggered after each image has been loaded.
instanceimagesLoaded - the imagesLoaded instanceimageLoadingImage - the LoadingImage instance of the loaded image
Image - Theimg element
Boolean -true when the image has successfully loaded
Array ofLoadingImage instances for each image detected
varimgLoad=imagesLoaded('#container');imgLoad.on('always',function(){console.log(imgLoad.images.length+' images loaded');// detect which image is brokenfor(vari=0,len=imgLoad.images.length;i<len;i++){varimage=imgLoad.images[i];varresult=image.isLoaded ?'loaded' :'broken';console.log('image is '+result+' for '+image.img.src);}});
Install imagesLoaded with npm.
npm install imagesloaded
You can thenrequire('imagesloaded').
// main.jsvarimagesLoaded=require('imagesloaded');imagesLoaded('#container',function(){// images have loaded});
Use.makeJQueryPlugin to make.imagesLoaded() jQuery plugin.
// main.jsvarimagesLoaded=require('imagesloaded');var$=require('jquery');// provide jQuery argumentimagesLoaded.makeJQueryPlugin($);// now use .imagesLoaded() jQuery plugin$('#container').imagesLoaded(function(){...});
Run webpack.
webpack main.js bundle.js
imagesLoaded works withBrowserify.
npm install imagesloaded --save
varimagesLoaded=require('imagesloaded');imagesLoaded(elem,function(){...});
Use.makeJQueryPlugin to make to use.imagesLoaded() jQuery plugin.
var$=require('jquery');varimagesLoaded=require('imagesloaded');// provide jQuery argumentimagesLoaded.makeJQueryPlugin($);// now use .imagesLoaded() jQuery plugin$('#container').imagesLoaded(function(){...});
- Chrome 49+
- Firefox 41+
- Edge 14+
- iOS Safari 8+
UseimagesLoaded v4 for Internet Explorer and other older browser support.
Development uses Node.js v16 with npm v8
nvm use
imagesLoaded is released under theMIT License. Have at it.
About
📷 JavaScript is all like "You images done yet or what?"