Precargar Imagen con JavaScript

Vamos a ver como podemos crear un objeto imagen con JavaScript sin mostrarlo en la página para precargar una imagen.

Esto nos servirá para tener la imagen cargada y no tener que cargarla cuando queramos usarla por ejemplo en un rollover, consiguiendo que el efecto sea rápido.

La manera de realizar la precarga es crear un objeto image y darle valor a su atributo src para indicarle la dirección de la imagen a cargar:

<script>imagen = new Image(); imagen.src = "imagen.gif";</script>

A partir de este momento, si usamos imagen.gif, no tendremos que cargarla, asi podremos hacer por ejemplo una imagen del tipo:

<img src="dibujo.gif" onmouseover="this.src='imagen.gif'">

Que automaticamente cambie por imagen.gif al ponerle el mouse encima sin esperar que se carge.

Artículo por cortesía de Eloi de San Martín
www.programacionweb.net

Usuarios que han visto este tema también han visto...

- Función: removeChild() en Javascript
- Cuenta atrás en Javascript
- Refresco de imágenes para Webcam en JavaScript
- Ventana en primer plano
- Cómo comunicar Flash y JavaScript en ActionScript 3

- Versión imprimible de este documento

- Enviar por e-mail este documento