El problema
La presencia de imágenes en las páginas web es algo inevitable. De hecho si examinamos el tamaño total de una página vemos que habitualmente el tamaño debido al texto es muy inferior al apartado gráfico, por eso para logar que nuestras páginas se descarguen de forma rápida es fundamental optimizar el tamaño de las imágenes, pero también podemos acelerar la descarga de éstas. Otras veces las imágenes no aparecen inicialmente sino cuando el visitante hace algo, como por ejemplo en los efectos rollover (cambio de la imagen al pasar el ratón), en este caso es fundamental que la imagen se encuentre ya cargada.

La solución

¿Como acelerar el proceso de descarga de las imágenes? Haciendo que el explorador las descargue desde el principio y no desde que las vea en el contexto de tota la página, como es lo habitual. Para esto usamos el objeto image del modelo de objetos del explorador. Para ello lo primero es anotar que imágenes están dentro de la página y luego para cada una de ellas creamos un objeto imagen a cuya propiedad src le asignamos la dirección de cada imagen.

imagen = new Image;
imagen.src = "/imagenes/imagen.jpg"

Cuando son muchas imágenes se suele usar una lista, un array, de objetos imágenes


Un caso práctico

Como ejemplo supongamos una página donde tenemos un botón con dos imágenes: normal.gif y activa.gif (para cuando el ratón pasa por encima), en la sección Head de la página colocamos un script de ejecución inmediata:

boton = new Array(2)
boton[0] = new Image;
boton[0].src = "activa.gif";
boton[1] = new Image;
boton[1].src = "normal.gif";

Así desde el momento en que se ejecuten estas líneas el explorador comenzará a cargar las imágenes y cuando se necesiten (con un poco de suerte) estarán ya en la caché del ordenador y se mostrarán de inmediato.