imagen mientras carga web

txusmax · #1 (**permalink**) 12/11/2010, 15:29

Buenas!

A ver, os comento, tengo una pagina diseñada de la siguiente forma, una capa contenedor que no varia de tamaño ni posición
y el resto de capas con elementos dentro de esa para tener centrada la pagina.

Ahora lo que quiero es poner una imagen de carga ya que la pagina principal son basicamente imagenes y tarda un poquito en
cargar y queda aspecto feo, por lo que quiero que mientras se carga aparezca el fondo negro por ejemplo y con una imagen de
loading, para despues desaparecer y que se vea la pagina principal.

He estado probando cosas, pero lo unico que he conseguido es una capa en la parte superior de la capa contenedor que me
muestra lo que quiero (imagen de loading y fondo rojo), el comportamiento es bueno, ya que en cuanto cargan todas las imagenes
desaparece, pero claro, aparece en la parte de arriba y se ven todas las imagenes mientras cargan...

Este es el codigo que he usado:

(Esta parte la he probado en el head y en el body y me da lo mismo):

Código:

<!-- imagen de carga -->
<script type='text/javascript'>
 window.onload = detectarCarga;
 function detectarCarga() {
      document.getElementById("imgLOAD").style.display="none";
 }
</script>
<!-- fin imagen de carga-->

y luego en el body:

Código:

<body>

<center><div id="imgLOAD" style="text-align:center; width:1024; height:600; background-color:#F00">Paciencia, estoy en carga...
<img src="imagenes/cargando.gif"/></div></center>  

<div class="centrado" id="contenedor">
               y por aqui ya el resto de la web...

He intentado darle el mismo tamaño que la capa contenedor para que la tape y luego desaparezca, pero nada...

¿Alguna idea por favor?

Muchisimas gracias!

zerokilled · #2 (**permalink**) 12/11/2010, 16:28

oculta el contenedor principal con CSS y luego lo muestra al momento de ocultar el aviso de que esta cargando.

txusmax · #3 (**permalink**) 14/11/2010, 06:36

Cita:

Iniciado por zerokilled

oculta el contenedor principal con CSS y luego lo muestra al momento de ocultar el aviso de que esta cargando.

Muchas gracias por la respuesta, pero estoy atascado, llevo poco tiempo con CSS y estoy un poco verde.

En el codigo CSS he añadido:

Código:

#contenedor {
	visibility:hidden;
}

Y bien, el contenedor no se muestra y aparece la imagen de cargando...

Pero ahora no se como hacer para que desaparezca la capa cargando... y aparezca la capa contenedor.

Seguro que es una tonteria, pero no doy con ello...

Saludos!!!

_cronos2 · #4 (**permalink**) 14/11/2010, 06:51

En vez de usar visibility usa display, así no te dejará el hueco que ocupa. Y después en la función sólo tienes que añadirle algo para que el contenedor principal cambia su display a block, igual que hiciste con el de carga.
Saludos (:

txusmax · #5 (**permalink**) 14/11/2010, 07:06

Cita:

Iniciado por _cronos2

En vez de usar visibility usa display, así no te dejará el hueco que ocupa. Y después en la función sólo tienes que añadirle algo para que el contenedor principal cambia su display a block, igual que hiciste con el de carga.
Saludos (:

Muchas gracias; Creo que ahora si que funciona, lo que he hecho es dejar la funcion de carga asi:

Código:

<!-- imagen de carga -->
<script type='text/javascript'>
 window.onload = detectarCarga;
 function detectarCarga() {
      document.getElementById("imgLOAD").style.display="none";
	  document.getElementById("contenedor").style.display="block";
 }
</script>
<!-- fin imagen de carga-->

y el contenedor en el CSS asi:

Código:

#contenedor {
	display:none;
}

¿Estaria bien?

¿Podeis probar la pagina a ver si funciona? w w w. pcatope . es

Muchisimas gracias!