Official way to ask jQuery wait for all images to load before executing something

Question

In jQuery when you do this:

$(function() {
   alert(\"DOM is loaded, but images not necessarily all loaded\");
});

It waits for the DOM to

Answer 1

I would recommend using imagesLoaded.js javascript library.

Why not use jQuery's $(window).load()?

As ansered on https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load/26929951

It's a matter of scope. imagesLoaded allows you target a set of images, whereas $(window).load() targets all assets — including all images, objects, .js and .css files, and even iframes. Most likely, imagesLoaded will trigger sooner than $(window).load() because it is targeting a smaller set of assets.

Other good reasons to use imagesloaded

• officially supported by IE8+
• license: MIT License
• dependencies: none
• weight (minified & gzipped) : 7kb minified (light!)
• download builder (helps to cut weight) : no need, already tiny
• on Github : YES
• community & contributors : pretty big, 4000+ members, although only 13 contributors
• history & contributions : stable as relatively old (since 2010) but still active project

Resources

• Project on github: https://github.com/desandro/imagesloaded
• Official website: http://imagesloaded.desandro.com/
• Check if an image is loaded (no errors) in JavaScript
• https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
• imagesloaded javascript library: what is the browser & device support?