Precarga tu página con jQuery y CSS

Hay veces en que una pagina es muy pesada o al momento que esta cargando los elementos se ven desordenados.
Vamos a implementar un ejemplo sencillo y funcional. Usaremos la libreria "JQuery".

Implentacion







Creamos un archivo style.css y lo guardamos en la carpete csss

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

Creamos un archivo "js" llamado scripts.js y la ubicamos en la carpeta "js"


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

Finalmente el codigo html.