Problema con onLoad de imagen

rcastillo · #1 (**permalink**) 02/11/2006, 05:48

Estimados

Este es mi primer post en esta sala; desde hace un tiempito estoy tratando de meterle el diente a Javascript y haciendo algunas cositas por mi cuenta.

En este caso se me presenta un problema con onload, el tema es así; tengo una función donde creo un objeto Images y paso como parámetro una imagen para que se asigne al src del mismo. A su vez aplico este src a una imagen en al página.

El objetivo es que al hacer click en distintos links se vayan mostrando otras imágenes usando como preload un DIV que muestro y oculto.

Por tanto en el onload del objeto Images, ejecuto una función que me oculta el div de la precarga. En Mozilla todo bien pero en IE, una vez que ya vi todas las fotos y por tanto ya cargaron, no me funciona el onload y por tanto no me oculta el DIV.

Aquí dejo el código fuente del HTML con el javascript:

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Galer&iacute;a de im&aacute;genes Javascript</title>
<style type="text/css">
	html, body { margin: 0; height: 100%; background: black; }
	img { border: 0; }
	#contenedor { height: 100%; width: 100%; }
	#banda { width: 100%; position: relative; top: 50%; margin-top: -210px; }
	#fotos { height: 350px; width: 500px; margin: 0 auto; border: #7C7C7C solid 10px; overflow: hidden; }
	#vinculos { height: 70px; width: 500px; margin: 0 auto; margin-top: 25px; text-align: center; }
	#vinculos img { margin: 0 10px; }
	#preload { position: absolute; height: 350px; width: 500px; text-align: center; background: black; }
	#preload img { margin-top: 150px; }
</style>
<script type="text/javascript">

	function switchImage(cambia){
	
		document.getElementById("preload").style.visibility="visible";
		imagen = new Image();
		imagen.src = cambia;
		document.getElementById("grande").src = imagen.src;
		imagen.onload = actua
		
	 }
	 
	 function actua(){
	 	 
		document.getElementById("preload").style.visibility="hidden";
		
	 }
	 
	 
</script>

</head>

<body onload="switchImage('images/logo_1_grande.gif')">

<div id="contenedor">
	<div id="banda">
		<div id="fotos">
			<div id="preload"><img src="images/preload.gif" alt="" /></div>
			<img id="grande" src="" alt="" />
		</div>
		<div id="vinculos">
			<a href="javascript:switchImage('images/logo_1_grande.gif');"><img src="images/logo_1_chico.gif" alt="" /></a>
			<a href="javascript:switchImage('images/logo_2_grande.gif');"><img src="images/logo_2_chico.gif" alt="" /></a>
			<a href="javascript:switchImage('images/logo_3_grande.gif');"><img src="images/logo_3_chico.gif" alt="" /></a>
		</div>
	</div>
</div>

</body>
</html>

agradezco vuestra ayuda
saludos
negro

caricatos · #2 (**permalink**) 02/11/2006, 09:02

Hola:

Hay otra forma de saber cuando una imagen a terminado de cargarse, y es usando el atributo complete de los objetos Image (y tag img)... Es algo más difícil de programar pero es algo más fiable...

var imagen;
function cargando() {
if (imagen.complete) actua();
else setTimeout("cargando()", 100);
}

function switchImage(cambia){

document.getElementById("preload").style.visibilit y="visible";
imagen = new Image();
imagen.src = cambia;
document.getElementById("grande").src = imagen.src;
//imagen.onload = actua
cargando();
}

Como puedes ver hace falta un paso intermedio recursivo...

Saludos

rcastillo · #3 (**permalink**) 02/11/2006, 11:12

¡Grande caricatos!, no conocía esa propiedad, me parece bárbara la resolución.

saludos
negro

caricatos · #4 (**permalink**) 02/11/2006, 12:36

Hola:

Me alegro de que funcione... por suerte fué cosa fácil.

Saludos