javascript
1function initLazyLoad(root = document) {
2 const images = root.querySelectorAll('img[data-src]');
3
4 if (!('IntersectionObserver' in window)) {
5 images.forEach(loadImage);
6 return;
7 }
8
9 const observer = new IntersectionObserver((entries, obs) => {
10 for (const entry of entries) {
11 if (!entry.isIntersecting) continue;
12 loadImage(entry.target);
13 obs.unobserve(entry.target);
14 }
15 }, {
16 rootMargin: '200px 0px',
17 threshold: 0.01
18 });
19
20 images.forEach((img) => observer.observe(img));
21}
22
23function loadImage(img) {
24 const { src, srcset } = img.dataset;
25
26 img.addEventListener('load', () => {
27 img.classList.add('is-loaded');
28 }, { once: true });
29
30 img.addEventListener('error', () => {
31 img.classList.add('is-error');
32 }, { once: true });
33
34 if (srcset) img.srcset = srcset;
35 if (src) img.src = src;
36
37 delete img.dataset.src;
38 delete img.dataset.srcset;
39}
01 / 01