Lazyload con puro Javascript

Deja un comentario / Front-End / Por

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.

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:

XHTML

<!DOCTYPE html>
<html lang=«en»>
<head>
<meta charset=«UTF-8»>
<meta http-equiv=«X-UA-Compatible»content=«IE=edge»>
<meta name=«viewport»content=«width=device-width, user-scalable=no, initial-scale=1»>
<title></title>
</head>
<body>
</body>
</html>

En el cual comenzaremos agregando nuestro CSS inicial:

CSS

figure, a {
border:0;
margin:0;
padding:0;
display:inline-block;
}
 
figure img {
width:100%;
}
 
.lazy-images-placeholder {
background:url(«https://revistaimage.com/wp-content/uploads/2016/08/placeholder-3-1.jpg»);
background-position:center;
background-repeat:no-repeat;
background-size:cover;
display:block;
overflow:hidden;
}
 
.lazy-images-placeholder img {
display:block;
visibility:hidden;
opacity:0;
filter:blur(20px);
transition:opacity1sease-in-out,filter1sease-in-out;
}
 
.lazy-images-placeholder img.lazy-images-loaded {
visibility:visible;
filter:blur(0);
opacity:1;
}

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:

XHTML

<figure>
<picture class=«lazy-images-placeholder»>
<img src=«https://static.vix.com/es/sites/default/files/styles/large/public/t/thor-ragnarok-gladiator-hulk.jpg»
class=«lazy-images»>
</picture>
</figure>

Comenzando con el código Javascript:

JavaScript

(function(){
 
// Asignamos en 2 variables AddEventListener y RemoveEventListener para asi no tener que llamarlos con window
constaddEventListener=window.addEventListener||function(n,f){
window.attachEvent(‘on’+n,f);
};
constremoveEventListener=window.removeEventListener||function(n,f,b){
window.detachEvent(‘on’+n,f);
};
 
// Iniciamos nuestro LazyLoad
constlazyLoad={
cache:[],// en esta variable almacenaremos todas las imagenes que encontremos en nuestro dom con la clase «.lazy-images»
Timer:newDate().getTime(),// variable para setear la fecha actual (la necesitaremos para validar el momento que se agrego a la variable cache)
addObservers:()=>{// Un observador de funciones dentro de addEventLister y removeEventListener
// Lo ponemos a escuchar «scroll» y «resize» para que ejecute la funcion lazyLoad.Load
addEventListener(‘scroll’,lazyLoad.Load);
addEventListener(‘resize’,lazyLoad.Load);
},
Load:()=>{
let now=newDate().getTime();
if((now–lazyLoad.Timer)>=200){
lazyLoad.Timer=now;
lazyLoad.loadVisibleImages();
}
},
loadVisibleImages:()=>{
let scrollY=window.pageYOffset||document.documentElement.scrollTop;
let pageHeight=window.innerHeight||document.documentElement.clientHeight;
let range={
min:scrollY–100,
max:scrollY+pageHeight+100
};
 
leti=0;
while(i<lazyLoad.cache.length){
let image=lazyLoad.cache[i];
let imagePosition=getOffsetTop(image);
let imageHeight=image.height||0;
if((imagePosition>=range.min–imageHeight)&&(imagePosition<=range.max)){
let imgLoad=newImage();
imgLoad.src=image.src;
imgLoad.onload=()=>{
image.classList.add(‘lazy-images-loaded’);
};
lazyLoad.cache.splice(i,1);
continue;
}
i++;
}
 
if(lazyLoad.cache.length===0){
lazyLoad.removeObservers();
}
 
},
removeObservers:()=>{
removeEventListener(‘scroll’,lazyLoad.Load,false);
removeEventListener(‘resize’,lazyLoad.Load,false);
},
init:()=>{
if(!document.querySelectorAll){
document.querySelectorAll=function(selector){
constdoc=document,
head=doc.documentElement.firstChild,
styleTag=doc.createElement(‘STYLE’);
head.appendChild(styleTag);
doc.__qsaels=[];
styleTag.styleSheet.cssText=selector+«{x:expression(document.__qsaels.push(this))}»;
window.scrollBy(0,0);
returndoc.__qsaels;
}
}
addEventListener(‘load’,_init=()=>{
let imageNodes=document.querySelectorAll(‘.lazy-images’);
for(leti=0;i<imageNodes.length;i++){
let imageNode=imageNodes[i];
lazyLoad.cache.push(imageNode);
}
lazyLoad.addObservers();
lazyLoad.loadVisibleImages();
removeEventListener(‘load’,_init,false);
});
 
}
};
 
constgetOffsetTop=(el)=>{
let val=0;
if(el.offsetParent){
do{
val+=el.offsetTop;
}while(el=el.offsetParent);
returnval;
}
};
 
lazyLoad.init();
 
})();
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito de compra