jQuery Here is a small code snippet I use for preloading images for mouseovers. It uses $(window).bind(‘load’, function() {...}) to wait until all page elements have finished loading. This includes all images. If you use $(document).ready() it would start preloading images while other elements are still loading. This will make rest of the page feel slow.

Code below searches for all images with class hover. Then it adds _on to image name and pushes it to preload queue. When page has finished loading, images in preload queue get loaded. Loading happens sequentially one by one. Thus reducing stress to server.

Preloading code is based on mailing list post by Luke Lutman. Note that currently this code throws stack overflow with IE when there is more than 15 images to be preloaded. I am currently working on version which avoids this problem.

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

After preloading I use following code to apply mouseovers. If there is image already which ends with string _on mouseover is removed.

$(document).ready(function() {
    $(".hover").each(function() {
        if ($(this).attr("src").match(/_on\.(.+)$/i)) {
            $(this).removeClass("hover");
        }
    });
    $(".hover").hover(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        $(this).attr("src", s);
    }, function() {
        s = $(this).attr("src").replace(/_on\.(.+)$/i, ".$1");
        $(this).attr("src", s);
    });
});

For those who want to test. You can download snippet here.

UPDATE: You might also want to check how to lazy load images

10 Responses to “Preload Images Sequentially With jQuery”

  1. benjamin sapp Says:

    thanks for this. it saved me some time.

  2. Mika Tuupola Says:

    Glad I could help :)

  3. Sun Says:

    this is great! thanks for sharing. :-)

  4. pelle Says:

    hi

    i tried out your example above but had some problems with images with absolute urls (which normally should be used for cache reasons)

    anyway my reg exp. skills are limited so i went for the jquery irc:

    pelle_: hi – does anyone have an online example of manipulating a string in jquery – more specific to insert a “_on” to the following string “http://127.0.0.1/bn_flag_english.gif” so it looks like “http://127.0.0.1/bn_flag_english_on.gif” i tried with <string>.replace(/\.(.+)$/i, “_on.$1”) seen @ http://www.appelsiini.net/~tuupola/823/sequentially-preloading-images – but this inserts the “_on” the wrong place “http://127_on.0.0.1/bn_flag_english.gif” ........ thanks for any hints

    and got the following solution/suggestion:

    bidioule_: .replace(/\.([^.]+)$/i,”_on.$1”)

    this works for me

    //

    pelle

  5. Mika Tuupola Says:

    Good catch. Thanks!

  6. matt Says:

    thanks for sharing, i’ve modified for my needs and it works like a charm! much better than other solutions i’ve been looking at. :)

  7. Mika Tuupola Says:

    Thanks! This code snippet is also part of my everlasting quest on how to make websites (feel) faster.

  8. ben Says:

    How would one use a placeholder image with this? I’m trying to show a loading gif until all the images are loaded.

  9. Mika Tuupola Says:

    ben: Basically you would change the src attribute of original image to placeholder. Then create new image element with original src attribute. When load event of this new img element triggers you then change src of original image back to original src.

    However I do not quite understand what you are trying to achieve. You usually preload images which are not visible. Is something like Lazy Loading what you are after?

  10. pyromus Says:

    This is script was needed my new project. Thanks for share :)

Leave a Reply