How to insert a GIF in my entire web page? (lazy loader)

To start, let me tell you that you have made the best decision, because doing this on your website will bring many benefits both in SEO and in the appearance of your website, it will have a fresher air and it will seem very current (although perhaps it is not). It does not matter how your website is made because this option will serve almost any CMS, or if you have a website made with custom programming.

So, assuming that you have already chosen your image with the .gif extension, there will be only 3 steps to carry out to successfully achieve our GIF lazy loader or lazy load as you want to call it.

Step 1: Locate the header of our page, in case we want it for the entire site. If you are in wordpress we paste the following code into the header.php file after opening the tag, if you do not use wordpress then you simply paste it in your header, if you have a different one for each page you paste it in everything you have.

<div class="loader">
<img src="url-de-tu-imagen.gif" >
</div>

If we want it for a specific page, we will put it inside our general container.

Step 2: We locate our script file or we can also open a <script> tag inside our <head> tag and there we paste the following function:

 $(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.

Comparte para enseñar a otros

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.