capa mientras se carga la página

marcvilap · #1 (**permalink**) 25/09/2008, 11:14

Buenas compañeros,

Tengo un problema que me trae loco en los últimos días. Estoy realizando una web y me encuentro con un problema que he visto que es bastante común. Debido al tiempo de carga de algunas imagenes de mi web, incluido el fondo, ésta se carga a trozos de una manera poco atractiva. Por eso, después de mirar por ahí, decidí que la mejor solución era crear una capa que cubriera toda la web hasta que ésta se cargara ( utilizando el evento onLoad) pero no me funcionaaaaaaa!!! He estado un rato mirando y no se encontrar el error. Dejo el codigo para ver si encontrais algo

Cita:

<head>

<pre>

<style type="text/css">

#tope {

position:absolute;
color:pink;
background-color:yellow;
left:0px;
top:0px;
width:100%;
height:100%;
z-index:1000;
text-align:center;
visibility:visible;
}

</style>
</pre>

<pre>

<script language="JavaScript">

function loaded () {
document.getElementById('tope').style.visibility=' hidden';}
</script>
</pre>
</head>

<body onLoad="loaded()">
</body>

Daniel Ulczyk · #2 (**permalink**) 25/09/2008, 11:20

Fijáte si el script que está publicado en este thread te es útil:

cargar imagenes de una pagina web, urgente!!!

Suerte!

JavierB · #3 (**permalink**) 25/09/2008, 11:49

Mensaje movido al foro de JavaScript desde CSS.

Saludos,

webosiris · #4 (**permalink**) 25/09/2008, 11:49

- para que usas PRE??
- script language no se usa más, debería de ser

Código html:

Ver original<script type="text/javascript">

- y lo principal, en el html, donde está el div con id "tope"??

marcvilap · #5 (**permalink**) 25/09/2008, 12:12

La verdad que lo de <pre> era para cargar el css pero supongo q es erroneo, la verdad soy novato en el tema. He corregido lo que me decias: He quitado el pre y lo de script, pero no se donde poner el div "tope". Si lo pongo justo debajo de body onload me hace :

1ero- me pone el div tope
2ndo- me carga mi página encima del div tope
3ero - se me queda la pagina con el fondo de mi web

pongo el código

Cita:

Disculpen si he hecho alguna barbaridad

marcvilap · #6 (**permalink**) 25/09/2008, 12:26

Acabo de resolver el úlitmo punto. Ahora se me carga la página web, pero el div tope me aparece por debajo de las imagenes que se cargan primero, justamente lo que no quiero.

No se si es problema de z-index o que pero bueno .

Si alguien me puede ayudar se lo agradecería

webosiris · #7 (**permalink**) 25/09/2008, 14:01

lo tienes que poner así:

Código html:

Ver original<body>
<div id="tope"></div>
todo el resto del html de tu sitio
</body>

marcvilap · #8 (**permalink**) 25/09/2008, 16:44

OHHH.

Muchas gracias compañero me has servido de mucho, ahora me sale perfecto en ie pero en firefox aun no, es normal eso?

Saludos

ssclamp · #9 (**permalink**) 25/09/2008, 19:07

Quizás sea porque tienes un espacio de más en la línea:

document.getElementById('tope').style.visibility=' hidden';} (entre la primera ' y hidden)

debe ser así:

Código HTML:

document.getElementById('tope').style.visibility='hidden';}

Esta prueba funciona perfectamente en iexplorer, en firefox y en opera, la prueba tiene metida la página de un periódico porque suelen pesar mucho y tardan un poco en terminar de cargarse y se puede ver bien el efecto de la capa de precarga:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Capa de precarga de página</title>
<style type="text/css">
#tope {
	position:absolute;
	color: black;
	background-color: #C0C0C0;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	text-align: center;
	visibility: visible;
}
html {
	overflow: hidden;
	margin: 0;
}
body {
	overflow: hidden;
	margin: 0;
}
.envolvente {
	border: solid 1px #CCCCCC;
	overflow: auto;
}
.aviso {
	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	color: #000000;
  	text-align: center;
}  	
</style>

<script type="text/javascript">
//---
function loaded () {
document.getElementById('tope').style.visibility='hidden';}
//---
</script>

</head>

<body onLoad="loaded()">
<div id="tope">
<span id="centrada" style="position:absolute; width: 240px; height: 40px; margin-left: -120px; margin-top: -20px; z-index:1; left: 50%; top: 50%" class="aviso">Espere mientras se carga la página...</span>
</div>
<div id="wrapper" style="width: 100%; height: 100%;" align="center">
<iframe id="exterior" src="http://www.elmundo.es" height="500" width="700" class="envolvente"></iframe>
</div>
</body>

</html>

marcvilap · #10 (**permalink**) 26/09/2008, 09:53

Compañero gracias por el ejemplo. Pero me pasa (con tu ejemplo) lo mismo que con el mio. En Firefox se me carga la capa #tope pero desaparece antes de que se cargue la imagen de fondo. En ie7 en sin embargo funciona perfectamente. No se si alguien le ha pasado lo mismo pero ya no se que hacer

Gracias por todo

David · #11 (**permalink**) 26/09/2008, 10:07

A mí me funciona igual en ambos navegadores, ¿puedes poner el enlace a tu página?.

marcvilap · #12 (**permalink**) 26/09/2008, 10:16

Ok he quitado el logo pero la página es esta

http://mhou.es/mgl/gestionar.php

Lo acabo de probar y me pasa lo que te decia, gracias

David · #13 (**permalink**) 26/09/2008, 10:25

Nuevamente me funcionó igual en ambos navegadores

. ¿Cuál era exactamente el problema?.

marcvilap · #14 (**permalink**) 26/09/2008, 10:44

En ie7 se carga todo bien:

1ero se carga la capa
2n se oculta la capa y aparece el fondo y los 3 iconos centrales a la vez

pero en Firefox se carga en este orden:

1er se carga la capa
2ndo se oculta la capa
3ero se cargan los tres iconos centrales
4arto se carga el fondo

Gracias

ssclamp · #15 (**permalink**) 26/09/2008, 20:16

Firefox gestiona la carga de una imagen como fondo de un divisor con un pequeño retraso sobre el dibujado de la totalidad de la página, por eso lo último que sale es el fondo.

Una solución podría ser que maquetaras el divisor que tiene como fondo la imagen fondo.png sin fondo [sin background-image:url(fondo.png)] y colocaras la imagen como <img border="0" src="fondo.png" width="870" height="1100"> dentro del divisor y el texto que sobrepones lo colocas en otro divisor sobrepuesto con valores z-index adecuados.

Estoy seguro que de esta forma saldrá la página completa al desaparecer la capa de ocultación.

Haz una prueba y nos cuentas.

Saludos

marcvilap · #16 (**permalink**) 27/09/2008, 04:09

Muchas gracias SSClamb, lo he probado y me ha salido genial , eres un crack.

Si alguien quiere probarlo que no se deje de poner en la capa del texto , la que va encima el position:absolute top:0px left:0px, sino te pone una capa debajo de otra, es una chorrada pero para los novatos como yo puede servir de ayuda.

Un abrazo

ssclamp · #17 (**permalink**) 27/09/2008, 17:54

Si se ha solucionado... pues estupendo.

Y aumentar la información sobre cómo maquetar nunca me parece una chorrada...

Saludos