JavaScript is all like \"You images done yet or what?\"
\n\n[imagesloaded.desandro.com](https://imagesloaded.desandro.com)\n\nDetect when images have been loaded.\n\n## Install\n\n### Download\n\n+ [imagesloaded.pkgd.min.js](https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js) minified\n+ [imagesloaded.pkgd.js](https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js) un-minified\n\n### CDN\n\n``` html\n\n\n\n```\n\n### Package managers\n\nInstall via npm: `npm install imagesloaded`\n\nInstall via Yarn: `yarn add imagesloaded`\n\n## jQuery\n\nYou can use imagesLoaded as a jQuery Plugin.\n\n``` js\n$('#container').imagesLoaded( function() {\n // images have loaded\n});\n\n// options\n$('#container').imagesLoaded( {\n // options...\n },\n function() {\n // images have loaded\n }\n);\n```\n\n`.imagesLoaded()` returns a [jQuery Deferred object](https://api.jquery.com/category/deferred-object/). This allows you to use `.always()`, `.done()`, `.fail()` and `.progress()`.\n\n``` js\n$('#container').imagesLoaded()\n .always( function( instance ) {\n console.log('all images loaded');\n })\n .done( function( instance ) {\n console.log('all images successfully loaded');\n })\n .fail( function() {\n console.log('all images loaded, at least one is broken');\n })\n .progress( function( instance, image ) {\n var result = image.isLoaded ? 'loaded' : 'broken';\n console.log( 'image is ' + result + ' for ' + image.img.src );\n });\n```\n\n## Vanilla JavaScript\n\nYou can use imagesLoaded with vanilla JS.\n\n``` js\nimagesLoaded( elem, callback )\n// options\nimagesLoaded( elem, options, callback )\n// you can use `new` if you like\nnew imagesLoaded( elem, callback )\n```\n\n+ `elem` _Element, NodeList, Array, or Selector String_\n+ `options` _Object_\n+ `callback` _Function_ - function triggered after all images have been loaded\n\nUsing a callback function is the same as binding it to the `always` event (see below).\n\n``` js\n// element\nimagesLoaded( document.querySelector('#container'), function( instance ) {\n console.log('all images are loaded');\n});\n// selector string\nimagesLoaded( '#container', function() {...});\n// multiple elements\nvar posts = document.querySelectorAll('.post');\nimagesLoaded( posts, function() {...});\n```\n\nBind events with vanilla JS with .on(), .off(), and .once() methods.\n\n``` js\nvar imgLoad = imagesLoaded( elem );\nfunction onAlways( instance ) {\n console.log('all images are loaded');\n}\n// bind with .on()\nimgLoad.on( 'always', onAlways );\n// unbind with .off()\nimgLoad.off( 'always', onAlways );\n```\n\n## Background\n\nDetect when background images have loaded, in addition to `