Duda con precarga de imágenes

[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?