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!

Answer 1

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.

Answer 2

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})