mostrar capa cuando se han terminado de cargar las imagenes...

Dokan · #1 (**permalink**) 21/07/2005, 15:11

hola
he estado ojeando varios comentarios de este foro sobre el tema:
comentario #224815
comentario #228025
faq #196
faq #179
me decidí por hacer un div con una imagen de cargando... y otro oculto con las imagenes, ademas de una funcion para que cuando estubieran cargadas las imagenes ocultara el primer div y mostrara el segundo
pero haciendo pruebas en mi web no he conseguido q funcione nada,
¿esta mal este codigo?

Código PHP:

   
function inicio(){

document.getElementById('fotospeq').style.visibility = 'visible';

document.getElementById('cargando').style.visibility = 'hidden';

}

 
<body onload="inicio()">

por si influye dire q el codigo corresponde a un iframe, ¿puede ser por eso q falla?
¿se os ocurre donde puede estar el error?

saludos y gracias

Dokan · #2 (**permalink**) 21/07/2005, 15:20

por si acaso pongo el resto del codigo del iframe...

Código PHP:

  <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<LINK rel="stylesheet" type="text/css" href="../css/anteriores.css">

<script type="text/javascript" src="../javascript/scroll.js"></script>

<script type="text/javascript" src="../javascript/funciones_glo.js"></script>

<script type="text/javascript" src="../javascript/funciones_loc.js"></script>

<script language="JavaScript" type="text/javascript">

function inicio(){

document.getElementById('fotospeq').style.visibility = 'visible';

document.getElementById('cargando').style.visibility = 'hidden';

}

</script>

</head>

<body onload="inicio()">

<table width=30>

<tr><td><a href="#" onclick="document.getElementById('cargando').style.visibility='hidden'">oculta la capa 'cargando'</a></td>

<td><a href="#" onclick="document.getElementById('fotospeq').style.visibility = 'visible'">muestra la capa 'fotospeq'</a></td>

</tr>

</table>

<table width=533 height=112 cellspacing=0 cellpadding=1 border=0>

<tr><td class="gb">

<table width=533 height=112 cellspacing=0 cellpadding=6 border=0>

<tr> 

<td class="bl" valign=top height=80>

<div id="bgfotospeq">

<div id="cargando"><br><br><br>

<center>

<img src="../images/cargando_imagenes.gif" width=120 height=15 alt="Cargando imágenes . . .">

</center><br><br>

</div>

<div id="fotospeq">

<table width=533 cellpadding=0 cellspacing=0 border=0>

<td><a href="javascript:cambiaFicha(0)">

<img alt="" src="../images/primera/00.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(1)">

<img alt="" src="../images/primera/01.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(2)">

<img alt="" src="../images/primera/02.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(3)">

<img alt="" src="../images/primera/03.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(4)">

<img alt="" src="../images/primera/04.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(5)">

<img alt="" src="../images/primera/05.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(6)">

<img alt="" src="../images/primera/06.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(7)">

<img alt="" src="../images/primera/07.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(8)">

<img alt="" src="../images/primera/08.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(9)">

<img alt="" src="../images/primera/09.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td><td><a href="javascript:cambiaFicha(10)">

<img alt="" src="../images/primera/10.jpg" width=150 height=100 border=0></a></td>

<td><img src="../images/au.gif" width="7"></td>

<tr></tr>

</table>

</div>

</div>

</td></tr>

</table>

</td></tr>

</table>

 
<table width=533 cellspacing=0 cellpadding=0>

<tr><td>

<a href="#" onmouseover="noScroll=false; mLeft()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra" class=e>&lt; Anteriores</a>

</td>

<td align=center>&nbsp;</td>

<td align=right>

<a href="#" onmouseover="noScroll=false; mRight()" onmouseout="noMove()" onclick="sScrollPx-=sScrollExtra; return false" onfocus="if(this.blur)this.blur()" onmousedown="sScrollPx+=sScrollExtra" class=e>Siguientes &gt;</a>

</td></tr></table>

<br>

<div id="bgfotosg">

<div id="cargando"><br><br><br>

<center>

<img src="../images/cargando_imagenes.gif" width=120 height=15 alt="Cargando imágenes . . .">

</center><br><br>

</div>

<div id="fotosg">

<img src="/img/au.gif" width="533" height="1">

</div></div>

</body>

</html>

la funcion ahora se encuentra en funciones_loc.js, aunque la he pegado donde la tenia antes (entre <head> y </head>), la cambie por si acaso... pero sigue sin ir

se q es muy engorroso leer todo este tocho, asi q muchas gracias por intentarlo.

Dokan · #3 (**permalink**) 23/07/2005, 05:02

he añadido los simbolos de comentario de html (creo) como sigue y funciona.

Código PHP:

  <script language="JavaScript" type="text/javascript">

<!-- 

 
 
function inicio(){

document.getElementById('fotospeq').style.visibility = 'visible';

document.getElementById('cargando').style.visibility = 'hidden';

}

 
// -->

funciona pero no me pregunteis...
¿es necesario ponerlos siempre?

caricatos · #4 (**permalink**) 23/07/2005, 09:16

Hola Dokan:

Si te interesa que se carguen las imágenes, tienes que comprobar el atributo complete de cada una... hay un array de imágenes de la página (document.images)... tendrías que poner ese código después de comprobar que se han cargado esas imágenes.

Saludos