jQuery Image Preload Plugin

I needed a jQuery img preload plugin in order to detect when an image had actually loaded. The scenario basically went as follows:

I had several images and content layered on top of one another and I needed to have them all visible. The problem I ran into was that as the browser loaded the images, certain images would load faster then others. Images on the lower layers sometimes would load before the upper most layers, causing some of the layers to be visible for a split second before the upper layers would appear. I needed a way to hide all but the upper most layer and then show all when I detected that the top most layer image had loaded.

Overview

The jQuery imgpreload plugin allows you to preload images before and/or after the dom is loaded.

Options

The following are the options provided by the image preloader plugin, you can change them globally or override the defaults by passing the settings object to the imgpreload method.

1
2
3
4
5

$.fn.imgpreload.defaults =
{
	each: null // callback invoked when each image in a group loads
	, all: null // callback invoked when when the entire group of images has loaded
};

Usage

The following illustrates using the plugin to preload images after the dom has loaded. One important note, in this situation you are forcing a preload to be able to take advantage of the callback, the browser should start loading the image immediately.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$('#content img').imgpreload(function()
{
	// this = jQuery image object selection
	// callback executes when all images are loaded
});
 
$('#content img').imgpreload
({
	each: function()
	{
		// this = dom image object
		// callback executes when each image loads
	},
	all: function()
	{
		// this = jQuery image object selection
		// callback executes when all images are loaded
	}
});

To preload images before the dom has loaded, for instance in the HEAD of the document, you would have to use specific image paths.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$.imgpreload('/images/a.gif',function()
{
	// this = new image object
	// callback
});
 
$.imgpreload(['/images/a.gif','/images/b.gif'],function()
{
	// this = array of new image objects
	// callback executes when all images are loaded
});
 
$.imgpreload(['/images/a.gif','/images/b.gif'],
{
	each: function()
	{
		// this = new image object
		// callback executes on every image load
	},
	all: function()
	{
		// this = array of new image objects
		// callback executes when all images are loaded
	}
});

Download

jQuery imgpreload plugin, this project is on github

Related posts

1. jQuery Scrollable Table Plugin
2. WordPress HiFi Plugin — Head and Foot Injection
3. WordPress Peekaboo Plugin

Tagged as: Javascript, jQuery, jquery plugin, plugin