When using jQuery I find that I often want to wait for an image to be fully loaded before I perform an action.

For example, I quite often find myself producing a slide show with only a few images in it, and I want to make sure that all the images have been cached before I start the show. If an image is not available and I try to transition to it in a  slide show, all sorts of nasty things can happen.

Basing the plugin off the one available at http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript/. I wrote a  image preloader with a  callback mechanism to allow notification of when the images have finished loading.

Download

Version 1.1.0 (released 03/01/12):     jquery.loadImages.1.1.0.zip

Earlier versions available from the jQuery plugin page

Usage

This plugin has been tested with jQuery and is compatible with all major browsers.

To use this script, add both the jquery framework and the plugin to your html document, then call.

$.loadImages(['image1.jpg', 'image2.jpg'], callback())

This will preload the images in the array then call the optional callback

To load a single image

$.loadImages('image1.jpg',callback())

I hope this plugin is of some use. Please let me know if you find any problems with it.