Precarga tu página con jQuery y CSS

Precargar una página es importante para mejorar la experiencia del usuario, esto en caso nuestra página sea muy pesada o por que cuando la página no se ha cargado completamente se puede ver desordenada o incompleta.

Un poco de teoría

Para inicializar una página se realiza con el evento  es decir cuando se cargado el DOM o HTML, además de ello existe el evento  el cual se ejecuta cuando ademas del HTML se ha cargado todo el contenido (imágenes, css, etc).


$(document).ready(function(e) {
// html loaded
});
$(document).load(function(e) {
// html + images + css loaded
});


Entonces lo que haremos es agregar un div que cubra toda la página y una vez que todo el contenido se haya cargado ocultar este div para develar el contenido de nuestra web.

Implementado en Precargador

Lo primero es editar nuestro HTML y crear un div que contendrá la imagen de un precargador.

 

Luego agregamos código CSS para hacer que este div recién creado se muestre cubriendo completamente nuestra página:


body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed;
top:0; left:0;
right:0; bottom:0;
background: #000;
z-index: 100;
}
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%; top:50%;
background: url(../img/loader.gif) no-repeat center 0;
margin:-50px 0 0 -50px;
}


Finalmente agregamos el código javascript, para ello detectamos que se ha completado la carga de todo el contenido del HTML utilizando el método ready y utilizamos una transición para ocultar el div creado previamente con lo cual se devela nuestra página.


$(window).load(function() {
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'});
})


Finalizando
Ahora que tenemos todo el proceso lo vamos a unir en un solo archivo html para hacer las pruebas respectivas:






 

...