alguna buena funcion para precargar ciertas imagenes antes de ver el sitio

Capimaster · #1 (**permalink**) 23/04/2008, 12:15

Lo que pasa que estoy utilizando el onmouseover y onmouseout para cambiar el fondo de unas tablas pero el problema es ke me tarda mucho en cargarlas y si le paso el mouse a primera instancia no me sale hasta que la carga...

entonces quiero saber si hay algo para que precargue las imagenes de fondo antes de que cargue el resto del sitio... para en cuanto pase el mouse por mi tabla. al instante me aparezca el fondo...

Agradezco mucho su ayuda!

Calisco · #2 (**permalink**) 23/04/2008, 14:04

Deberías crear variables o un array de objetos de imágenes.

Código PHP:

  miImagen = new Image ();  // con esto creas el objeto
miImagen.src = "url.imagen.png";   // Aca definis el URL de la imagen

Con esto aseguras la carga de la imagen dentro de tu pagina web.
Saludos.

rossz · #3 (**permalink**) 23/04/2008, 14:14

Calisco, yo hice uno parecido y coloque document.write(cargaIMG[i].src+"<br />"); y me sale toda la ruta de las imagenes, ahora como hago para que me muestre la imagen en si, no la ruta! (en javascript)
Gracias

Calisco · #4 (**permalink**) 23/04/2008, 14:29

Lo que pasa rossz es que estas escribiendo en el documento solo la dirección URL de la imagen.
Deberías tener algo similar a:

Código PHP:

  document.write('<img src="' + cargaIMG[i].src+'" /><br />');

De todas formas, no creo que sea la mejor manera de agregar tus imágenes dentro de la página; igual, tal vez para lo que necesitas con esto te baste y sobre.
Saludos.

codigojavascript · #5 (**permalink**) 23/04/2008, 19:40

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>