Preload Images Sequentially With jQuery

June 5th, 2007

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

Tagged with javascript jquery

10 Responses to “Preload Images Sequentially With jQuery”

benjamin sapp Says:
October 16th, 2007 at 02:39 AM
thanks for this. it saved me some time.
Mika Tuupola Says:
October 17th, 2007 at 01:02 PM
Glad I could help :)
Sun Says:
October 27th, 2007 at 12:33 PM
this is great! thanks for sharing. :-)
pelle Says:
November 15th, 2007 at 01:00 PM
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
Mika Tuupola Says:
November 15th, 2007 at 08:34 PM
Good catch. Thanks!
matt Says:
February 15th, 2008 at 12:56 AM
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. :)
Mika Tuupola Says:
February 15th, 2008 at 12:26 PM
Thanks! This code snippet is also part of my everlasting quest on how to make websites (feel) faster.
ben Says:
March 5th, 2008 at 03:12 AM
How would one use a placeholder image with this? I’m trying to show a loading gif until all the images are loaded.
Mika Tuupola Says:
March 7th, 2008 at 10:24 AM
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?
pyromus Says:
May 15th, 2008 at 10:21 AM
This is script was needed my new project. Thanks for share :)

Mika Tuupola