jquery.loadimages

A JQuery plugin to attach load listeners to images within a container and fire an event when all the images have loaded.

Why use this plugin?

If you have a container which has img elements inside and you want the container or other parts of your site to behave differently before and after the img srcs have loaded.

How does it work?

The LoadImages plugin attaches load events to all images within a container that have the class 'load-image' and waits until all the images are loaded before dispatching the 'loadImages.onImagesLoaded' event.

The LoadImages plugin will add a class to the target container to notify you of the current images load state: load-images-loading during load and load-images-loaded once the loading has completed.

Usage Instructions

Include the LoadImages plugin and CSS by adding the following to the head of you page:

    <script type="text/javascript" src="../path/to/jquery-loadimages.js">     <link type="text/css" rel="stylesheet" href="../path/to/jquery-loadimages.css"> 

Next add the class 'load-image' to the images within the container that you want to track loading:

    <img src="../path/to/image1.jpg" class="load-image" />     <img src="../path/to/image2.jpg" class="load-image" />     <img src="../path/to/image3.jpg" class="load-image" /> 

Next create an instance of the plugin on the container that contains the images (you could attach it to the whole of the document body if you wanted to have a page wide loader display until all the images are ready...)

    $("#container-with-images").loadImages(); 

Finally you can listen to the following events so that your page can respond to the LoadImages plugin state changes:

loadImages.onImagesLoading - Dispatched when image loading starts

    var $loadImages = $("#container-with-images").loadImages();     $loadImages.on("loadImages.onImagesLoading", function() {         // show a loader or do something else...     }); 

loadImages.onImagesLoaded - Dispatched when image loading completes

    var $loadImages = $("#container-with-images").loadImages();     $loadImages.on("loadImages.onImagesLoaded", function() {         // Hide a loader or do something else...     }); 

Demo

If you want to see the plugin in action there is a simple demo on our website: http://www.antiblanks.com/static/loadimages.proto/index.html

Enjoy!