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