Crear un precarga con jQuery

Crear un precarga con jQuery: En este tutorial veremos cómo hacer una precarga en jQuery donde se muestre un .gif de "loading" mientras se esté cargando toda la web, ya que algunas veces los proyectos tienen muchas peticiones al servidor y esto hace que tarde.

Antes de comenzar con esto veremos unos conceptos que nos ayudará a entender el pequeño script:

• $(document).ready: se activa cuando carga todo el DOM, incluso aunque las imágenes no terminen de cargar.

Código :

$(document).ready(function() {
 alert("document cargo");
});

• $(window).load: se activa cuando la página termine de cargar todas las peticiones.

Código :

$(window).load(function() {
 alert("window cargo");
});

Ya con estos conceptos podemos comenzar a armar nuestro script. No se olviden de cargar antes jQuery.

Código :

$(document).ready(function(){
        //eliminamos el scroll de la pagina
        $("body").css({"overflow-y":"hidden"});
        //guardamos en una variable el alto del que tiene tu browser que no es lo mismo que del DOM
        var alto=$(window).height();
        //agregamos en el body un div que sera que ocupe toda la pantalla y se muestra encima de todo
        $("body").append("< div id="pre-load-web">< div id="imagen-load">< img src="http://preloaders.net/preloaders/359/Filling%20circles.gif" alt="" />Cargando...</ div></ div>"); 
        //le damos el alto 
       $("#pre-load-web").css({height:alto+"px"}); 
       //esta sera la capa que esta dento de la capa que muestra un gif 
       $("#imagen-load").css({"margin-top":(alto/2)-30+"px"}); 
})     
$(window).load(function(){ 
$("#pre-load-web").fadeOut(1000,function() { //eliminamos la capa de precarga $(this).remove();
//permitimos scroll 
$("body").css({"overflow-y":"auto"}); }); 
 
})

[css:1:5688226aae]#pre-load-web {width:100%;position:absolute;background:#92def8;left:0px;top:0px;z-index:100000}
/*aqui centramos la imagen si coloco margin left -30 es por que la imagen mide 60 */
#pre-load-web #imagen-load{left:50%;margin-left:-30px;position:absolute}[/css:1:5688226aae]

Con este sencillo script ya pueden tener un precarga sin necesidad de un plugin.

descargar script de precarga