Javascript: Precarga de imágenes

Hay que advertir que esta técnica no es la adecuada para los rollover en CSS, para los que es más correcto el uso de CSS Sprites. Se ajusta más para aquellas ocasiones en las que hay que hacer un rollover en elemento de imagen (IMG), para que el estado hover no aparezca momentáneamente sin imagen, o imágenes dentro de fragmentos de HTML generados mediante Javascript, para que se muestren inmediatamente.

Para la precarga se utilizará el objeto Image, del modo que se ve en la siguiente función:

function precargarImagenes () {
 
 // Array de imágenes precargadas
 var imagen = [];
 
 // Imágenes a precargar:
 var imagenes = ['ruta/imagen1.jpg','ruta/imagen2.jpg'];
 
 // En el while se van cargando las imágenes
 var numeroImagen = 0;
 var numeroImagenes = imagenes.length;
 while (numeroImagen<numeroImagenes) {
  imagen[numeroImagen] = new Image();
  imagen[numeroImagen].src = imagenes[numeroImagen];
  numeroImagen++;
 }
 
}

La clave está dentro del while: se crea un nuevo objeto de imagen y se le asigna la URL de la imagen al atributo src.