Te paso un ejemplo ya armado y listo para usar para hacer una pre carga de imagenes en la pagina.
pre carga de imagenes con javascript
El código fuente del ejemplo es el que está más abajo.
Código:
<HTML>
<HEAD>
<script language="javascript">
// Creamos un objeto imagen que nos servirá para pre cargar la imagen nueva
var imagenNueva = new Image();
// Definimos la URL de la imagen nueva mediante su atributo src
imagenNueva.src = "reload2.jpg";
// Hacemos lo mismo con la imagen original que se muestra a la carga de la página
var imagenOriginal = new Image();
imagenOriginal.src = "reload1.jpg";
/* Creamos una función que se ejecuta cuando se pasa el puntero del Mouse
sobre la imagen. Aquí se cambiará la imagen original por la imagen
nueva pre cargada */
function cambiar() {
/* Definimos que el atributo src de la imagen original tome el valor de src de
la imagen nueva */
document.images["imagen"].src = imagenNueva.src;
} // Fin de la función cambiar()
/* Esta función se ejecuta cuando quitamos el puntero del Mouse de la imagen
y restaura el valor del atributo src de la imagen */
function restaurar() {
// Volvemos a mostrar la imagen original
document.images["imagen"].src = imagenOriginal.src;
} // Fin de la función restaurar()}
</script>
</HEAD>
<BODY>
<h3>Pasa el puntero del Mouse sobre la imagen para mostrar la imagen pre cargada.</h3>
<!-- A modo de ejemplo creamos un objeto imagen que cargará el archivo definido
en el atributo src y ante el evento onMouseOver ejecutará la función cambiar()
para mostrar la nueva imagen pre cargada -->
<IMG src="reload1.jpg" onMouseOver="cambiar();" onMouseOut="restaurar();" name="imagen">
</BODY>
</HTML>