Quelle est la meilleure façon de précharger plusieurs images en JavaScript?

Question

Si j'ai un tableau de noms de fichiers image,

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

et je veux les précharger en boucle, faut-il à chaque fois créer un objet image? Est-ce que toutes les méthodes énumérées ci-dessous fonctionneront? Est-ce mieux?

UNE.

 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];
}
 

Merci!

Answer 1

EDIT:

En fait, je viens de le mettre à l'épreuve, et Une Méthode ne fonctionne pas comme prévu:

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

Si vous cliquez sur la 2ème image quand la page a fini de se charger, il devrait apparaître instantanément, car il a été préchargé, mais le premier n'est pas parce qu'il n'a pas eu le temps de charger avant de la source a été modifiée. Intéressant. Avec ce nouveau développement, je voudrais juste aller de l'avant et à l'utilisation de la Méthode C.

Answer 2

Le code suivant semble fonctionner pour moi. Son basé sur [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})
 

OU

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

Answer 3

J'ai toujours utilisé le code suivant, que j'ai également vu utilisé par de nombreux autres sites, donc je ferais l'hypothèse que cette méthode est la plus performante et s'apparente à votre méthode 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];
             }
    }
}
 

Je recommanderais de les profiler tous avec quelque chose comme Firebug

Answer 4

Si je me souviens bien, j'ai eu des problèmes avec la solution A qui ne préchargeait pas réellement dans un navigateur. Je ne suis pas sûr à 100%.

Puisque vous les avez tous codés, pourquoi ne pas les tester, vous pouvez même les profiler pour voir lequel est le plus rapide.