I needed a jQuery img preload plugin in order to detect when an image had actually loaded, so I built one! 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.
$.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.
$('#content img').imgpreload(function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// callback executes when all images are loaded
});
$('#content img').imgpreload
({
each: function()
{
// this = dom image object
// check for success with: $(this).data('loaded')
// callback executes when each image loads
},
all: function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// 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.
$.imgpreload('/images/a.gif',function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// callback
});
$.imgpreload(['/images/a.gif','/images/b.gif'],function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// callback executes when all images are loaded
});
$.imgpreload(['/images/a.gif','/images/b.gif'],
{
each: function()
{
// this = dom image object
// check for success with: $(this).data('loaded')
// callback executes on every image load
},
all: function()
{
// this = array of dom image objects
// check for success with: $(this[i]).data('loaded')
// callback executes when all images are loaded
}
});
Download
jQuery imgpreload plugin, this project is on github
Hi Dimas,
This is a great plugin but it could do with a “destroy” method to tear down the each and all callbacks. Any chance you could implement this?
Thanks
Julian
@Julian, great idea/point … there are a couple of tweaks i need to make to this code, I will implement a nice cleanup/destroy as well.
Thanks Dimas, that’s ace. Also, the comment (and fix) from Sojaner regarding replacing:
img.onload = function() { loaded.push(this); …
With
$(img).bind(“load”, null, function() { loaded.push(this); …
This does seem to fix the problem in old versions of IE.
If you could implement the cleanup/destroy method soon i’d be a very happy chap indeed as i’m building a brochure in js using your plugin.
All the best
Julian
Love this plugin..until I realized it fails on SOME systems with IE7. Any way you think you could fix that? The callback for “all” images downloaded fails. It worked for me on my test system, then the client said it didn’t work on theirs (IE7, IE8) unfortunately, so it’s a toughie to fix I’m sure.
Either way, great work. Thanks.
@Andrew, I’ve adjusted the plugin (latest is on github) and retested with all version of IE … IE6, IE7, IE8, IE9
Hi, thanks for your code!
I’m preloading 275 imgs (10mb at least) and use the below code.
It seems that it is loading several images before firing the write_debugger(); function.
The first images ar loaded by filename, the bigger part by dom reference
Is this ok or i’m missing someting?
$(document).ready(function(){
// images preload
$.imgpreload(‘config_files/images/loadingAnimation.gif’,function(){
write_debugger(“Loading gif”, “”);
$.imgpreload(‘config_files/images/modello_’+modello+’/base.png’,function(){
write_debugger(“Base loaded”, “”);
$.imgpreload(‘config_files/images/modello_’+modello+’/base_v2.png’,function(){
write_debugger(“Base V2 loaded”, “”);
$(‘.immagine_parte img’).imgpreload
({
each: function()
{
write_debugger($(this).attr(“name”), “”)
},
all: function()
{
write_debugger(“Fine!”, “”);
}
});
});
});
});
});
Thanks!
Nicola
any demo plsss? we need a nice demo in order us to understand much easier how this works…..
Great plugin, exactly what I was looking for.
@Wisdomsky there is a demo in the zip.
I’ll be checking the source briefly, but in the meantime, I’m wondering if there’s any mechanism to prevent images from being preloaded multiple times. Or is that something I need to worry about, and imgpreload doesn’t care?
@Bob, imgpreload keeps things simple and does what you tell it to do … however if an image is already preloaded, it will be fetched form browse cache vs loading new (you should not be taxed twice for the same image url).
Hey Dimas, I just added an issue at Github. Could you please see if we can fix it? It might be a pull request but it didn’t allow me to so an issue logged.
Hey, thanks for this plugin. Its perfect! Just what I needed a callback based approach.