Crear un precarga / preload con jquery

PIN
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Buscaba algun plugin para lograr hacer una precargar para mostrar una pantalla donde muestre un gif de loading miestras que por detras esta cargando toda la web ya que algunas veces los proyectos son con muchas peticiones al servidor y esto hace que tarde.

Antes de comenzar con esto hay que hacer algo de conceptos que ayudaran bastante para el pequeño script :

$(document).ready   = esto se activa cuando carga todo el DOM  incluso aun que las imagenes  no terminen de cargar

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

$(window).load = esto se activa cuando toda la pagina termine de cargar todas las peticiones

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

ya con estos concepto la tenemos mas clara para poder armar nuestro script no se olviden de cargar antes JQUERY

$(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..."); 
        //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"}); }); 
 
})
#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}

con este script ya pueden tener un precarga sin necesidad de un plugin y evitan peso

 

NOTA: Este articulo lo comparti en el blog de CRISTALAB, Lo digo para evitar malos entendidos y comentarios fuera de lugar.
Screenshot_1

descargar script de precarga

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Hi, I'm luis rodriguez

Hola, Soy Luis Rodriguez, radico en Lima – Perú, formado en una carrera informática, desempeñando desde el 2007 como programador web y viendo proyectos desde Front End y Back End a lo que me perfile como Full Stack. Esta Experiencia junto a mi interés en la Analítica Web me ayudó mucho entender el funcionamiento interno de las herramientas de analítica, con las que vengo trabajo activamente desde 2017. Linkedin

http://luisrodriguez.pe

Leave Your Comments