Blog

Home > Javascript  > 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/blog/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.

23 Comments

  • Travis

    Reply
    May 19, 2010at6:02 pm

    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

  • Travis

    Reply
    May 20, 2010at4:08 pm

    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)

  • Travis

    Reply
    May 20, 2010at5:30 pm

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

  • Travis

    Reply
    May 20, 2010at6:08 pm

    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!

  • Travis

    Reply
    May 21, 2010at3:10 pm

    ok, here is the url:
    [link removed}
    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

  • Travis

    Reply
    May 21, 2010at3:16 pm

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

  • Travis

    Reply
    May 24, 2010at2:07 pm

    ok, i think that’s working, thanks!

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

  • Travis

    Reply
    May 24, 2010at2:56 pm

    Actually it seems to be working with a swf preloader!

  • August 15, 2010at9:44 am

    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

  • December 7, 2010at2:54 pm

    i dont know why my original post is not showing.

  • chattambulo

    Reply
    December 14, 2010at1:14 pm

    Great plugin!!! Thanks!!!

  • Wayne Durack

    Reply
    February 6, 2011at1:21 am

    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

      • Marco Bozzola

        Reply
        May 4, 2011at8:54 am

        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.

  • lior

    Reply
    May 11, 2011at10:50 pm

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

  • October 13, 2011at11:53 am

    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

  • Brent Smith

    Reply
    February 7, 2012at2:30 pm

    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.

Post a Comment