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.

preloader

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.

<div id="preloader">
    <div id="loader">&nbsp;</div>
</div>

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:

<html>
<head>
<title>Preloader Demo</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="preloader">
    <div id="loader">&nbsp;</div>
</div>
<div id="main">
   ...
</div>
<script src="jquery.js">
</script>
<script type="text/javascript">
$(window).load(function() {
    $('#preloader').fadeOut('slow');
    $('body').css({'overflow':'visible'});
})
</script>
</body>
</html>
post-author