¿Cuál es la mejor manera de precargar múltiples imágenes en JavaScript?

Question

Si tengo una serie de nombres de archivo de imagen,

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

y quiero cargar previamente en un bucle, es necesario crear un objeto de imagen cada vez? ¿Funcionarán todos los métodos enumerados a continuación? ¿Es uno mejor?

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

Gracias!

Answer 1

EDITAR:

En realidad, acabo de poner a prueba, y el Método A no funciona como se pretende:

Compruébelo usted mismo: http://www.rootspot.com/stackoverflow/preload.php

Si hace clic en el segundo Una vez que la página haya terminado de cargarse, la imagen debería aparecer instantáneamente porque estaba precargada, pero la primera no, porque no tuvo tiempo de cargar antes de que se cambiara la fuente. Interesante. Con este nuevo desarrollo, seguiría usando el Método C.

Answer 2

Si mal no recuerdo tuve problemas con la solución A que en realidad no estaba precargando en un navegador. Aunque no estoy 100% seguro.

Dado que los tiene todos codificados, ¿por qué no probarlos, incluso puede perfilarlos para ver cuál es el más rápido.

Answer 3

Siempre he usado el siguiente código, que también he visto utilizado por muchos otros sitios, por lo que haría que el supuesto de que este método es mas potente y es similar a su método de 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]; 
      } 
    } 
} 

Recomendaría crear un perfil de todos ellos con algo como firebug

Answer 4

El siguiente código parece funcionar para mí. Su basado en [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(); 

// Solución:

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

O

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