imagesloaded

imagesLoaded is a small JavaScript utility that tells you when all the images inside a container element have finished loading (or have failed to load). This is a common problem in web pages: you add images to the page, but the browser loads them in the background after the page structure is already drawn. If you want to do something (like lay out a photo grid or start an animation) only after the images are actually ready, you need a way to detect that moment. That is what this library does.

You point it at a container element, and it watches every image inside. When all of them are either fully loaded or confirmed broken (an image that fails to download is still "done" in the sense that the browser is finished trying), it fires a callback function. You can also listen for progress events to react as each individual image finishes.

The library works both with plain JavaScript and as a jQuery plugin. With plain JavaScript you call the function directly with an element, a CSS selector string, or a list of elements. With jQuery you call .imagesLoaded() on a jQuery selection. It also supports background images, not just img tags: passing a background option tells the library to watch for CSS background images on the container or on matching child elements.

Events cover the main scenarios you would need: done (all images loaded successfully), fail (all done but at least one was broken), always (all done regardless of outcome), and progress (each image as it finishes). You can install it via npm or load it from a CDN. It works in Chrome, Firefox, Edge, and iOS Safari. The project is released under the MIT license.