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
