Lazyload con puro Javascript

Lazyload es un termino muy utilizado para las pre-carga de imágenes para un sitio web, mas que todo utilizado para la optimización de los mismos.

lazy load

Mis objetivos son los siguientes:

  1. Tratar de hacer un código que no pese mas de 2kb
  2. Usar una imagen placeholder (es la primera imagen que se muestra)
  3. Dar 2 efectos al mostrar la imagen: Opacity, Blur

Pasos:

Comenzamos con iniciar nuestro codigo HTML:

En el cual comenzaremos agregando nuestro CSS inicial:

En nuestro código CSS, lo que hice fue:

  1. Reiniciolos valores de los tags que voy a utilizar(en este caso son “figure” y “a”)
  2. A las imagenes que estarán dentro del tag “figure” les dare un ancho (width) de 100%
  3. He creado una clase llamada “lazy-images-placeholder” en cual sera nuestro tag “picture” que a la vez contendra nuestra imagen (tag “img”) y sera nuestra imagen placeholder (imagen inicial)**
  4. En el tag “img” dentro de “lazy-images-placeholder” comenzare agregando opacity 0, visibility hidden, filter blur 20px, display blog
  5. En el mismo tag “img” agregare “transition: opacity 1s ease-in-out, filter 1s ease-in-out;”, asignando transicion a los 2 propiedades que voy a utilizar “opacity” y “filter”.
  6. He creado la clase llamada “.lazy-images-loaded” que se agregara al tag “img” una vez la imagen haya sido cargada con exito.

El formato de las imagenes que utilizare para comenzar con el JavaScript:

Comenzando con el código Javascript:

 

(Visited 34 times, 1 visits today)

Dejar un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.