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/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.
If you liked this article you might like to read the follow-up article,
Nice link colour fades using jQuery.
Great script,thanks!
However, it seems to work fine most of the time but occasionally it will ‘stick’ on the preloader and will not callback the callback function. Can’t seem to figure out why.
Any ideas?
Thanks
I was setting the image.src in the script before I was setting the load callback. This is not a problem in most situations, but if the image is cached, internet explorer will call the onload event immediately, before it has had a chance to be set to allow the call back.
I have fixed the bug now – thanks for the heads up!
Thanks! However, it only seems to work with an image(as the preloader graphic).
I was using a swf being loaded via swfObject and it would get stuck and not call the callback (after the fix).
Anything specific that would cause that?
(am testing on FF at the moment)
It wouldn’t work with a swf – the plugin assumes an image is passed. You could look at the jQuery load event for your swf – though the load() method is dodgy on images if they are cached and I haven’t checked it on other objects…. It might be worth doing an experiment before you try this!
As for it still not working on images – I have tried to get this to fail, but I cannot…. One possibility is that if a 404 is returned by one of the images, the callback will not happen. Is it possible this is occasionally happening? Could you give me an example of when it isn’t working for you. Also, what version of firefox are you using?
sorry, it’s doing the same thing with the image as well.
oh, ok. what about an animated gif?
FF3.6
if i keep hitting refresh, eventually it will get stuck. occasionally when i go to another page and come back to that page. can post a url if necessary.
Thanks!
Animated gifs should be fine.
Can you send me a link please? I’m not seeing it with FF at all.
Thanks
ok, here is the url:
http://www.sjiassociates.com/temp/sji_WEBSITE/siteDemo2/html/work/client/ASE_test.shtml
It is a bit frustratingas it does not doit every time. sometimes it is the 1st time, other times you have to refresh quite a bit(maybe 20 times).
Also, by this:
‘It wouldn’t work with a swf – the plugin assumes an image is passed’
Do you mean the image being loaded or the preloader itself?
I am referring to the preloader itself being a swf.
Thanks
sorry,the orange square in the upper left corner represents the preloader (it is currently viewable the whole time)
@Travis You are not executing the loadImages inside a $(document).ready() function. This will mean that the DOM may or may not be ready, leading to problems. Please see here.
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
ok, i think that’s working, thanks!
so, no using a swf as a preloader, right?
Actually it seems to be working with a swf preloader!
Very good script, thanks.
I’ve installed it on my site, works very well.
in the footer is a link to your article.
Greetings
Werner
i dont know why my original post is not showing.
Great plugin!!! Thanks!!!
Hey, this is great. Thanks.
I do have a question though, it doesn’t seem to do anything on iOS devices – I know it runs the script, and creates the new image object, but I can’t tell where it falls over.
Wayne
I’ve not tried it on any iOS Devices – what happens?
It works perfectly in iOS 4.1
at least in my case
While preloading, the spinning wheel on the browser’s top statusbar appears, and disappears when it finishes.
first, thanks for the plugin!
second, I think there is a problem in your documentation. the callback function should be put without parenthesis.
if I want to call the function ready(), I should do it like this:
$.loadImages(imgs, ready);
instead of
$.loadImages(imgs, ready());
Greetings.
First I want to thank you for this script. It’s awesome.
I found a nasty bug under IE7: the callback was being called over and over. Here’s the fixed version I’m using for my projects:
http://tinypaste.com/77e86
Thank, I’m going to be updating the script soon, so I’ll include yor fix if you are happy for me to do so.
I’ve included your updates in the new script – thanks a lot
This script is so very awesome!
A few questions and perhaps ideas for future revisions:
Is there an easy solution to catch errors?
Can we stop the preload from continuing (halt it)?
Is it downloading images one at a time or several at a time?
Thanks for sharing. I am just breaking into JS.
Pingback: Tweets that mention jQuery Image preloader with callback -- Topsy.com