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!