Precargar imágenes con Javascript

Problema:

Crear y cargar imágenes de la página mediante javascript

Las imágenes se cargan en una pagina web mediante el elmento <img> cuyo atributo src  dice de donde debe leerlas. 

Pero a veces necesitamos  imágenes que no son inmediatamente visibles como las que componen una galería.

En estos casos necesitamos usar un script para cargar la imagen y tenerla lista cuando sea necesario mostrarla

Solución

Utilizar el objeto Image de javascript

Java script posee el objeto Image que se corresponde con los elementos <img> del lenguaje HTML.

Podemos crear objetos de este tipo y establecer su propiedad src para indicar la url de la 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.

Ejemplo

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.

scripts