[Jquery-Es] Cargando imágenes

[Choan Gálvez]

Hola.

On Jul 2, 2008, at 11:54 AM, Oscar Otero wrote:

> Hola a todos.
> Me gustaría saber si hay algún método para saber cuando una imagen  
> ha sido cargada por el navegador completamente. He realizado algún  
> sistema para visualizar imágenes donde para avanzar o retroceder  
> imágenes, lo que hace es cambiar el valor del atributo "src" de la  
> etiqueta "img". Para hacer la transición, lo que hago es utilizar la  
> función fadeIn y fadeOut para hacer desaparecer y aparecer la nueva  
> imagen. El problema es que al cambiar el src de la imagen, la nueva  
> imagen no se visualiza al momento sinó que tarda un poco en cargarse  
> en el navegador, por lo que el fade para enseñarla se ejecuta antes  
> de que la imagen esté disponible. ¿Hay algún tipo de detector para  
> saber cuándo está la imagen cargada y así aplicarle el fade?

Sí, lo hay.

Cuando una imagen completa su carga, dispara su propio evento onload.

Peeero, si intentas obtener el estado de las imágenes del documento,  
tendrás problemas (si la imagen ya se ha cargado, añadir un manejador  
para su onload no sirve de nada).

Así que lo más adecuado es crear una precarga de imágenes (aun para  
las imágenes que ya existen en el documento).

Rudimentariamente sería algo como:

	for (cada una de las imagenes que necesite precargar) {
		img = document.createElement('img');
		img.src = URI de la imagen;
		img.onload = function() {
			hacemos lo que toque hacer
		};
	}

Si estudias el código de algún widget de slideshow, verás el tema  
bastante clarito.

Un saludo.
-- 
Choan Gálvez
<http://lovhat.com/user/168/>