Un preloader o pre cargador es un elemento que normalmente se utiliza en los intros de algunas páginas webs o bien para cargar algún archivo especifico, en este caso trataremos de experimentar en un blog, aunque son muy estéticos y llamativos cabe destacar que no es muy recomendable para sitios de abundante tráfico y sobre todo muy cargados de archivos, ya que como lo dice el nombre; el preloader al funcionar de manera automática estará presente hasta que la página cargue todos los archivos, de esta manera algún sitio que sea muy sobrecargado y sea lento no se verá muy bien ya que el lector solo vera el preloader por un largo lapso y se ira del sitio.
Bien teniendo en cuenta eso vamos a la práctica;
Lo que haremos es introducir un DIV en el cual estará presente nuestro preloader, y dentro de este estará la imagen en movimiento que indicara el load del sitio.
Indicaremos los estilos que se aplicaran para el DIV que contiene la imagen del preloader.
El Scripts que emplearemos será el encargado de ejecutar el preloader, la función será que nuestro elemento aparezca cuando el blog empiece a cargar, una vez que cargue todos los archivos, el elemento desaparecerá.
Bien teniendo en cuenta eso vamos a la práctica;
Lo que haremos es introducir un DIV en el cual estará presente nuestro preloader, y dentro de este estará la imagen en movimiento que indicara el load del sitio.
<div id="preloader">
<div id="loader">
</div>
</div>
<div id="loader">
</div>
</div>
Indicaremos los estilos que se aplicaran para el DIV que contiene la imagen del preloader.
<style type='text/css'>
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed; top:0; left:0; right:0; bottom:0;
background: #000;
z-index: 100;
}
/* El gif */
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
}
</style>
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed; top:0; left:0; right:0; bottom:0;
background: #000;
z-index: 100;
}
/* El gif */
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
}
</style>
El Scripts que emplearemos será el encargado de ejecutar el preloader, la función será que nuestro elemento aparezca cuando el blog empiece a cargar, una vez que cargue todos los archivos, el elemento desaparecerá.
$(window).load(function() {
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'}); })
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'}); })
Bien una vez teniendo esos 3 elementos charlaremos un poco y tomaremos café, ese preloader si lo llegásemos a aplicar en nuestro sitio hará la función cada vez que carguemos cualquier página dentro del blog o web, entonces vamos a hacer algunas variantes para que funcione solo en la home, de esta manera cuando el visitante cargue el resto de las paginas exceptuando el home no se mostrara el loader.
El código será el siguiente:
Vamos a buscar el aplantilla esta línea: <body>
En caso de no aparecer esa línea en su plantilla buscaremos esta:
<body expr:class='"loading" + data:blog.mobileClass'>
Justo arriba de ese condigo pegaremos nuestro DIV:
<div id='preloader'>
<div id='loader'/>
</div>
<div id='loader'/>
</div>
Ahora introducimos nuestro Sripts, buscamos esta línea: </body>
Y justo arriba vamos a pegar nuestro Scripts con una condicional, para que solo se cargue en el home.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'> </script>
<script type='text/javascript'> $(window).load(function() {
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'}); })
</script>
</b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'> </script>
<script type='text/javascript'> $(window).load(function() {
$('#preloader').fadeOut('slow');
$('body').css({'overflow':'visible'}); })
</script>
</b:if>
Bien por ultimo buscamos esta línea: <head>
Y justo debajo pegamos los estilos para nuestro DIV de igual manera lo condicionaremos.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed; top:0; left:0; right:0; bottom:0;
background: #000;
z-index: 100;
}
/* El gif */
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
}
</style>
</b:if>
<style type='text/css'>
body {
overflow: hidden;
}
/* preloader */
#preloader {
position: fixed; top:0; left:0; right:0; bottom:0;
background: #000;
z-index: 100;
}
/* El gif */
#loader {
width: 100px;
height: 100px;
position: absolute;
left:50%;
top:50%;
background: url(URLimagen) no-repeat center 0;
margin:-50px 0 0 -50px;
}
</style>
</b:if>
Algunas variantes:
Donde dice URLimagen podemos usar el gif del load que gustemos, solo hay que alojarlo y emplearlo.
Donde dice width: 100px; height: 100px; debe ser el ancho y alto del gif
El Scripts está predispuesto a hacer el efecto con 'Slow' pero esto podemos variarlo entre 3000 o 1000 o como queramos, esto altera el tiempo que tardará el loader en desvanecer.
Como lo hicimos con condicionales solo se cargara en el home, hay una entrada de prueba para constatar que solo aplica en el inicio.
Vamos a ver como quedó.
Conclusiones: es un elemento muy llamativo y estético para nuestro sitio, muy fácil de emplear aunque algo no muy eficiente como dijimos para sitios muy cargados.
Fuente: blog.unijimpe
hola buen dia. quiero meter un preloader dentro de un tabla que cree en espera de que cargue los datos. pero quiero que inicie el preloader al dar click a un bototn que tengo fuera de la tabla.
ResponderEliminar