crear truco imagen cargando

[Alexis88]

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 HTML:

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

Código CSS:

#contenido{
    display: none;
}
 

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