Duda con precarga de imágenes

[pablitino]

Hola!!

Ya se que este tema está muy visto... pero por mucho que busco soluciones no consigo lograr lo que quiero.

Pretendo precargar una serie de imágenes en la caché del navegador porque tengo una serie de imágenes de gran tamaño en una galería y quiero que se muestren al usuario lo más rápido posible cuando pinche en la imagen minimizada (thumbail).

He probado de varias formas:

1- Con un array de imagenes y creando objetos Image:

Código:

var imagenes = new Array(datos.length);

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

Probando con el array imagenes siendo local a una función y global.

2- Añadiendo todas las imágenes a un div con propidead display a none (porque supongo que el navegador cargará la imagen al colocarla en un div oculto...):

Código:

document.getElementById("info").innerHTML = "<div id='img-cache' style='display:none;'></div>";

for(var i=0;i<datos.length; i++)
{
   document.getElementById("img-cache").innerHTML +=
           "<img src="+datos[i]"></img>";
}

NOTA: datos es un array con los src de las imágenes.

PROBLEMA: Pues que no me funciona... cuando el usuario pulsa en la imagen minimizada, no se muestra rapidamente la imagen maximizada; sino que el navegador hace una petición y tiene que cargar la imagen...

No sé si es que hago algo mal, o no aplico bien la técnica...

Muchas gracias, saludos

[caricatos]

Hola:

no veo que compruebes que las imágenes estén totalmente cargadas... Aunque tengas en memoria todos los objetos "Image()" que tengas que usar, si no están cargadas no puedes tener la certeza de que se vean... estos objetos tienen la propiedad "complete" que se pone true cuando terminan de cargarse, y lanzan el evento load.

Saludis

[nicolaspar]

Antiguamente usaba la función de DW:

Código javascript:

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

Y en el onload hacía:

Código javascript:

MM_preloadImages('images/uno.gif','images/dos.gif');
 

A su vez en el contenedor le solía poner en algunos casos un gif animado de preload de background. Para obtener de estos gifs podés ver por ejemplo http://www.ajaxload.info.

No sé si es lo mejor o no, pero me era efectivo.

Saludos.

[pablitino]

Gracias a los dos por las respuestas, me han orientado muy bien sobre lo que quiero hacer. Pero sigo teniendo el mismo problema a pesar de comprobar que se han cargado todas las imágenes con el "complete" de todas las imágenes.

Basta con comprobarlo hasta que todas las imágenes tengan complete a true?? Luego no hace falta que haga nada con las imágenes??
El navegador sigue haciendo peticiones a las imágenes...

Voy a concretar más lo que hago:

1- Primero obtengo un array datos que tiene la ruta de las imágenes.
2- Llamo a preloadImagenes(datos)

Código javascript:

function preloadImagenes(datos)
{
    imageImagenes = new Array(datos.length-2);
    boolImagenes = new Array(datos.length-2);
    for(var i=0; i<imageImagenes.length; i++) // Se precargan todas las imagenes
    {
        var imagen = "imagenes/grande/"+datos[i];
        imageImagenes[i] = new Image();
        imageImagenes[i].src = imagen;
        boolImagenes[i] = false;
    }
    
    comprobarCargadas();
}
 

Que inicializa los arrays imageImagenes (con los objetos Image), boolImagenes (que contiene el valor booleano que confirma si una imagen a sido cargada o no) y contImagenes (un valor entero que cuenta las que han sido cargadas).

3- La anterior llama a comprobarCargadas.

Código javascript:

function comprobarCargadas()
{
    if (contImagenes == imageImagenes.length) //Cuando están todas cargadas
        {               
            alert("todas");
            //for(var i=0; i<imageImagenes.length; i++)
                //$("#img-cache").append("<img src=\""+imageImagenes[i].src+"\"></img>");
            return;
        }
    for (var i=0; i<imageImagenes.length; i++)
        if(boolImagenes[i]==false && imageImagenes[i].complete) // Se ha cargado imageImagenes[i]
        {
            boolImagenes[i] = true;
            contImagenes++;
        }
    setTimeout("comprobarCargadas()", 10);
}
 

Que comprueba recursivamente si se han cargado todas.

4- Añado las fotos en elementos img de la siguiente forma:

Código javascript:

for (var i=2; i<datos.length; i++)
{
    cadena += "<img class='miniImagen' src='imagenes/mini/"+datos[i]+"' onClick='document.getElementById(\"imagenGrande\").src=\"imagenes/grande/"+datos[i]+"\");' title="+datos[i]+" alt="+datos[i]+" ></img>";
        }
 

Estos son los elementos que contienen los thumbails de las imágenes grandes. Cuando se pinche en uno de ellos quiero que se muestre en otro elemento la imagen grande... no sé si el problema está en que la imagen no se carga hasta que se hace click... pero también he probado a añadirlas en un elemento oculto y nada. Cuando hago click el navegador sigue haciendo peticiones...

No entiendo que es lo que pasa... es como si no funcionara la precarga... Lo siento por el rollazo, pero quería explicarme bien. ¿Alguna solución o propuesta?