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

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.

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

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

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

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.

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

Related

Recent Posts