<div class="grid">
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
<div class="item">
<img data-src="https://picsum.photos/300?random" alt="" />
</div>
</div>
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: auto auto;
width: 100%;
max-width: 640px;
margin: 0 auto;
}
.item {
padding: 10px;
}
img {
display: block;
width: 300px;
height: 300px;
opacity: 1;
transition: opacity 0.5s ease-out;
&[data-src] {
opacity: 0;
}
}
View Compiled
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
function imageLazyLoad() {
const images = Array.from(document.querySelectorAll('img[data-src]'));
if (images.length) {
if ('IntersectionObserver' in window) {
setupIntersectionObserver(images);
} else {
loadImages(images);
}
}
}
function setupIntersectionObserver(images) {
const observer = new IntersectionObserver(onIntersection, options);
images.forEach(image => observer.observe(image));
}
function onIntersection(entries, observer) {
entries.forEach((entry) => {
if (entry.intersectionRatio >= 0.5) {
observer.unobserve(entry.target);
loadImage(entry.target);
}
});
}
function loadImages(images) {
images.forEach(loadImage);
}
function loadImage(image) {
image.setAttribute('src', image.getAttribute('data-src'));
image.onload = () => image.removeAttribute('data-src');
}
imageLazyLoad();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.