Animacion mientras carga la pagina

guallox · #1 (**permalink**) 14/02/2009, 18:24

Hola a toddos
Hace tiempo no me pasaba por aquí.
Pues queria hacer una preguntita...que sinceramente no sé si se puede hacer con js, pero no pierdo nada por preguntar.

Mi pregunta es:
¿Como puedo mostrar un html que solo contenga un gif de "Cargando", mientras se carga la pagina real?

Es decir...mientras muestra ese gif, que se cargue la pagina. Cuando termine de cargarse, que el gif desaparezca.

por favor, ayudenme.

Gracias de antemano.

caricatos · #2 (**permalink**) 15/02/2009, 00:29

Hola:

El efecto es un arma de doble filo, ya que teniendo javascript desactivado corres el riesgo de que no vean nada tus visitantes, pero bastaría con una capa al final de la página (anmediatamente antes del cierre del body) que abarque toda la página superponiéndose, y en ella la imagen...

<body onload="document.getElementById('cargando').style. display = 'none'">
...
<div id="cargando" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: white url(esperando.gif) no-repeat center center"></div>
</body>

Saludos

guallox · #3 (**permalink**) 15/02/2009, 08:12

Cita:

Iniciado por caricatos

Hola:

El efecto es un arma de doble filo, ya que teniendo javascript desactivado corres el riesgo de que no vean nada tus visitantes, pero bastaría con una capa al final de la página (anmediatamente antes del cierre del body) que abarque toda la página superponiéndose, y en ella la imagen...

<body onload="document.getElementById('cargando').style. display = 'none'">
...
<div id="cargando" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: white url(esperando.gif) no-repeat center center"></div>
</body>

Saludos

muchisimas gracias... luego te digo si funcionó o no.

:)

majony · #4 (**permalink**) 15/02/2009, 10:19

A mi no me funciono

guallox · #5 (**permalink**) 15/02/2009, 15:20

NI a mi... :S

caricatos · #6 (**permalink**) 15/02/2009, 15:44

Hola:

Tal vez se cargue la página muy rápido... lo que se espera en la carga es el texto y no las imágenes y elementos externos (o tal vez sí...

)

Tal vez un retraso sirva:

Código javascript:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
    [url]http://www.caricatos.net/probador[/url]
</title>
<script>
function carga() {
 setTimeout("document.getElementById('cargando').style. display = 'none'", 3000);
}
window.onload = carga;
</script>
</head>
<body >
...
<div id="cargando" style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: white url(../dibujos/indicator.gif) no-repeat center center"></div>
</body></html>

Se puede ver aquí: Probador de scripts

Saludos

rb3m · #7 (**permalink**) 21/02/2009, 03:42

Puedes también ver éste: http://robertobaca.net/ejemplos/cargando.htm

La función se basa en que lo que está en onLoad no se ejecuta sino hasta que se hayan cargado todos los elementos de la página (excepto Opera que lo ejecuta inmediatamente).

Ten en cuenta que si hay algún problema cargando parte de la página el reemplazo nunca ocurrirá. Además, claro, de lo que dice el mensajito en el ejemplo.

Dalvenjha · #8 (**permalink**) 22/02/2009, 09:09

xD Pon de fondo del body un gif animado =P.

Me explico:

Tu probablemente tienes un div container ¿No es cierto? lo que podrías hacer es:

Ponerle display:none a tu div container, luego, crear una función que le de display: "block", y aplicar esta en el evento "onload", asi no aparecerá nada hasta que esté cargada completamente la página, y el gif del fondo podrá verse como un loader, claro está, en esa misma función también podrías decirle que reasigne el fondo del body, incluso podrías ponerle un fade a tu div container, asi saldría mejor el efecto.

Saludos!!