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.