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.
simple, great and lightweight. keeps its footprint down and provides excellent work.
I had my own image loader plugin(vanila js), but today I found that it was not working with IE7/8 in certain case.
googled for some ossome plugin and this works like charm.
Thank you.
Man, thanks for this. Has been really useful.
Hi all,
I’m trying to load images from a bidimensional array. Is this possible to catch the DOM object at the end of the load? Above my code:
var filesToLoad = []
filesToLoad.push({src:$(element).attr(‘background’), id:’background’})
$.imgpreload(filesToLoad,
{
each: function()
{
console.log($(this)) // big and strange object;
}
})
Thank you
Great job!
One thing I’m having problem is, when i try to replace your outcome with Images, it appears to say ‘error’ when the image actually loaded. I am trying to remove those messages and replace them with images, it just gets confusing.
Can you link us another demo, but with ACUTAL images? This will save our time and struggle.
Thank you!
Also, why does the page ‘redirect’ me to a blank page with successful loaded images (still being in the same URL)?
Thanks again!
THX.. This is working well.