Para empezar dejame decirte que has tomado la mejor decisión, porque hacer esto en tu página web traerá muchos beneficios tanto en el SEO como en la apariencia de tu web, pendrá un aire más fresco y parecerá muy actual (aunque quizás no lo sea). No importa como este hecho tu sitio web porque esta opción servirá casi para cualquier CMS, o bien si tienes una web hecha con programación a medida.
Entonces, suponiendo que ya tienes elegida tu imagen con la extensión .gif serán tan solo 3 pasos a realizar para lograr con éxito nuestro GIF lazy loader o carga perezosa como la quieras llamar.
Paso 1:
Ubicar el header de nuestra página, en el caso de que lo queramos para todo el sitio. Si estas en wordpress pegamos el siguiente código dentro del archivo header.php luego de la apertura de la etiqueta, si no usas wordpress pues simplemente lo pegas en tu header, si tienes uno diferente para cada página lo pegas en todos lo que tengas.
<div class="loader">
<img src="url-de-tu-imagen.gif" >
</div>Si lo queremos para un página en específica pues lo pondremos dentro de nuestro contenedor general.
Paso 2:
Localizamos nuestro archivo de scripts o también podemos abrir una etiqueta <script> dentro de nuestra etiqueta <head> y allí pegamos la siguiente función:
$(window).load(function () {
$(".loader").fadeOut("slow");
});Y por último el paso 3:
Simplemente es darle algo de estilo y fijar el ancho y la posición del .gif
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #020203; //aqui dependera del fondo de tu imagen y de tu pagina
}.loader img {
width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Y listo ya tenemos nuestro GIF lazy loader, cualquier pregunta, no dudes en hacérmela.
les dejare una web de donde pueden conseguir algunos GIFs gratis para personalizar LOADING.IO les sera de gran ayuda no tendrás que diseñar uno ni tú ni nadie.
