What is the best way to preload multiple images in JavaScript?

Question

If I have an array of image filenames,

var preload = ["a.gif", "b.gif", "c.gif"];

and I want to preload them in a loop, is it necessary to create an image object each time? Will all the methods listed below work? Is one better?

A.

var image = new Image();
for (i = 0; i < preload.length; i++) {
    image.src = preload[i];
}

B.

var image;
for (i = 0; i < preload.length; i++) {
    image = new Image();
    image.src = preload[i];
}

C.

var images = [];
for (i = 0; i < preload.length; i++) {
    images[i] = new Image();
    images[i].src = preload[i];
}

Thanks!

Is it a strict requirement that you start off with an array of filenames? If your aim is to simply enhance the user experience, you may be better off with using CSS sprites: http://www.alistapart.com/articles/sprites/ — Ates Goral, Apr 17 '09 at 17:11

Paolo Bergantino · Accepted Answer · 2009-04-17T17:08:22.097

11

EDIT:

Actually, I just put it to the test, and Method A does not work as intended:

Check it out: http://www.rootspot.com/stackoverflow/preload.php

If you click on the 2nd image when the page is finished loading, it should appear instantaneously because it was preloaded, but the first one doesn't because it didn't have time to load before the source was changed. Interesting. With this new development, I'd just go ahead and use Method C.

edited Apr 17 '09 at 17:08

answered Apr 17 '09 at 17:02

Paolo Bergantino

480,997
81
517
436

1

I have two (probably dumb) questions to add to the OP's: Wouldn't Method A mean each download has to finish before the next one starts? Does C offer an advantage by not waiting for each download to finish? – Andrew Ensley Apr 17 '09 at 17:05
4

None of the methods wait for the download to finish -- they're all just setting a property of the Image object. The differences are that A uses a single image several times, B creates separate Images without saving references to all of them, and C both creates an image per preload AND saves the reference. – ojrac Apr 17 '09 at 17:11

score 3 · Answer 2 · edited Jan 05 '12 at 07:32

3

The following code seems to work for me. Its based on [A]

JQuery:

var gallery= ['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'];

var preload_image_object=new Image();

//Solution:

$.each(gallery,function(i,c){preload_image_object.src=c.logo})

OR

$.each(['img/1.png','img/2.png','img/3.png','img/4.png','img/5.png'],function(i,c){preload_image_object.src=c})

edited Jan 05 '12 at 07:32

sra

23,820
7
55
89

answered Nov 09 '10 at 06:27

Kent

31
1

score 2 · Answer 3 · answered Apr 17 '09 at 17:17

I've always used the following code, which I've also seen used by many other sites, so I would make the assumption that this method is most performant and is akin to your method c

function MM_preloadImages() { //v3.0
    var d=document; 
    if(d.images){ 
        if(!d.MM_p) d.MM_p=new Array();
         var i,j=d.MM_p.length,a=MM_preloadImages.arguments; 
         for(i=0; i<a.length; i++)
             if (a[i].indexOf("#")!=0) { 
                 d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];
             }
    }
}

I would recommend profiling them all with something like firebug

I believe Dreamweaver generates this code, which explains the `MM` prefix (for Macromedia). — Sasha Chedygov, Jan 04 '11 at 00:03

score 1 · Answer 4 · answered Apr 17 '09 at 17:05

1

If I remember correctly I had issues with the A solution not actually pre-loading in a browser. I'm not 100% sure though.

Since you have them all coded out, why not test them, you could even profile them to see which is fastest.

answered Apr 17 '09 at 17:05

Ben S

68,394
30
171
212

What is the best way to preload multiple images in JavaScript?

4 Answers4

Linked