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.
