jQuery Image preloader with callback

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.


About Alex Taylor

Roslin Design specialises in web design in Edinburgh. We offer competitively priced website design, and website hosting services. Roslin also provides web management services.
This entry was posted in Javascript, jQuery and tagged , , , , .
Bookmark the permalink.

24 Comments

  1. Travis

    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

    • Alex Taylor

      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!

  2. Travis

    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)

    • Alex Taylor

      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?

  3. Travis

    sorry, it’s doing the same thing with the image as well.

  4. Travis

    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!

  5. Alex Taylor

    Animated gifs should be fine.
    Can you send me a link please? I’m not seeing it with FF at all.
    Thanks

  6. Travis

    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

  7. Travis

    sorry,the orange square in the upper left corner represents the preloader (it is currently viewable the whole time)

  8. Travis

    ok, i think that’s working, thanks!

    so, no using a swf as a preloader, right?

  9. Travis

    Actually it seems to be working with a swf preloader!

  10. Werner

    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

  11. john

    i dont know why my original post is not showing.

  12. chattambulo

    Great plugin!!! Thanks!!!

  13. Wayne Durack

    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

    • Alex Taylor

      I’ve not tried it on any iOS Devices – what happens?

      • Marco Bozzola

        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.

  14. lior

    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());

  15. Leandro Horacio Barone

    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

  16. Brent Smith

    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.

  17. Pingback: Tweets that mention jQuery Image preloader with callback -- Topsy.com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>