Comunidad de diseño web y desarrollo en internet online

Mostrar un gif hasta que cargue el HTML

Citar            
MensajeEscrito el 07 Jun 2014 06:28 pm
Saludos chicos..

Quisiera saber si es posible hacer que mientras se cargue todo el contenido de un sitio web, se muestre una barra de progreso o algo así, solamente usando JS o CSS, y que solo termine la animación cuando realmente termine de cargar todo el contenido del sitio.

He visto en varios sitios pero ninguno ofrece realmente lo que quiero. ¿Alguna sugerencia, idea o recurso?

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 14 Jun 2014 02:35 am

Puedes retrasar la aparición del contenido del documento con el método setTimeout, ejecutando luego de un tiempo determinado, una función que muestre el contenido del documento. Por ejemplo:

Código CSS :

#contenido{
    display: none;
}


Código HTML :

<section id = "contenido">
    Contenido de tu página
</section>
<img id = "cargando" src = "carga.gif" />


Código Javascript :

setTimeout(function(){
    document.getElementById("contenido").style.display = "block";
    document.getElementById("cargando").style.display = "none";
}, 5000);



El contenido del documento lo agrupo en la sección "contenido", mientras que al Gif de carga lo pongo aparte. Luego, en la hoja de estilos, oculto la sección del contenido y en el código JS, ejecuto la función que ocultará al Gif de carga y mostrará la sección del contenido, para lo cual, tendrán que transcurrir 5000 milisegundos o 5 segundos, tiempo durante el cual solo se verá el Gif de carga.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 14 Jun 2014 12:01 pm
Gracias por esta variante Alexis88, pero en este caso "estoy engañando" a la persona que entra a la página ¿No? O sea, en realidad el GIF desaparece pasado un tiempo, no cuando cargue el contenido como tal.

¿Será ese el mismo efecto conseguido en este sitio? http://forum.beetledeveloper.tk/

De todos modos un millón de gracias por darme una variante.

Por elav

Claber

1461 de clabLevel

9 tutoriales

Genero:Masculino  

Administrador de Sistemas

firefox
Citar            
MensajeEscrito el 16 Jun 2014 05:07 am

No sé si me equivoco, pero creo que en esa página cargan todo con Ajax, por lo que el tema del Gif de carga sería más real puesto que el objeto XHR tiene estados, siendo el estado 4 el que representa la recepción de la respuesta. Entonces, solo te quedaría hacer algo como esto:

Código Javascript :

if (xhr.readyState < 4){
    document.getElementById("id_gif").style.display = "block";
    document.getElementById("id_contenido").style.display = "none";
}
else{
    document.getElementById("id_gif").style.display = "none";
    document.getElementById("id_contenido").style.display = "block";    
}



Y con jQuery, puedes manipular esos estados con los métodos ajaxStart y ajaxStop.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.