subir - ¿Cuál es la mejor manera de cargar varias imágenes en JavaScript?

javascript mostrar imagen

Question

Si tengo una matriz de nombres de archivo de imagen,

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

y quiero precargarlos 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];
}

SEGUNDO.

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

DO.

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

¡Gracias!

Answer 1

El siguiente código parece funcionar para mí. Está 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})

Answer 2

Si recuerdo correctamente, tuve problemas con la solución A que en realidad no se estaba cargando previamente en un navegador. Aunque no estoy 100% seguro.

Ya que los tiene todos codificados, por qué no los prueba, incluso podría hacer un perfil de ellos para ver cuál es más rápido.

Answer 3

Siempre he usado el siguiente código, que también he visto usado por muchos otros sitios, por lo que supongo que este método es el más eficaz y es similar a su método 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];
             }
    }
}

Yo recomendaría hacer un perfil de todos ellos con algo así como firebug

Answer 4

EDITAR :

En realidad, solo lo puse a prueba, y el Método A no funciona como se esperaba:

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

Si hace clic en la segunda imagen cuando la página termina de cargarse, debería aparecer instantáneamente porque estaba precargada, pero la primera no, porque no tenía tiempo para cargar antes de que se cambiara la fuente. Interesante. Con este nuevo desarrollo, seguiré adelante y usaré el Método C.