Rejilla de imagen de desvanecimiento adaptable con carga diferida

Vista prévia

Descripción

Una rejilla de imagen de desvanecimiento adaptable que utiliza el observador de intersección para carga diferida de imágenes a medida que se desplazan a la vista.

Funcionamiento

Agregue imágenes de marcador de posición a la cuadrícula.

<div class="grid-container">

<div class="grid-item"><img src="placeholder.jpg" /></div>

<div class="grid-item"><img src="placeholder.jpg" /></div>

<div class="grid-item"><img src="placeholder.jpg" /></div>

<div class="grid-item"><img src="placeholder.jpg" /></div>

<div class="grid-item"><img src="placeholder.jpg" /></div>

...
</div>

Los estilos CSS/CSS3 necesarios para la rejilla de la imagen.

.grid-container {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

grid-auto-rows: minmax(270px, 1fr);

max-width: 1280px;

margin: 0 auto;
}

.grid-row,
.grid-item {

display: block;

overflow: hidden;
}

.grid-item img {

-o-object-fit: cover;


 object-fit: cover;

-o-object-position: center;


 object-position: center;

width: 100%;

height: 100%;
}

.grid-item {

-webkit-transform: translateY(-10%);

transform: translateY(-10%);

opacity: 0;

-webkit-transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);

transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);

transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;

transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.grid-item.inview {

-webkit-transform: translateY(0);

transform: translateY(0);

opacity: 1;
}

El principal JavaScript para cargar perezosos imágenes reales a la cuadrícula.

const observer = new IntersectionObserver((entries) => {

entries.forEach((entry) => {



const rand = Math.floor(Math.random() * 30);



if (entry.isIntersecting === true) {





const img = entry.target.querySelector("img");





entry.target.classList.add("inview");





img.src = `https://source.unsplash.com/random/960x540/?${rand}`;



} else {





entry.target.classList.remove("inview");



}

});
});
const items = document.querySelectorAll(".grid-item");

items.forEach((item, index) => {

observer.observe(item, index);
});