Outbook
HTML+CSS+JS, Accesibilidad, PHP y más
Inicio
Desarrollo web
Javascript
Javascript: Precarga de imágenes
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.
Artículos relacionados:
Datos del artículo:
- Publicado el Domingo 7 de marzo de 2010 a las 21:23
- Archivado en Desarrollo web, Javascript
- Etiquetas: Imágenes, javascript, Precarga de imágenes
- Seguimiento de comentarios (RSS 2.0).
Comentarios del artículo
Puedes comentar o hacer trackback desde tu propio sitio web.
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.










