Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Javascript: Precarga de imágenes

Datos de búsqueda

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.

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio