| 1 | function lazyload() { |
| 2 | const lazy = document.querySelectorAll(".lazy") |
| 3 |
|
| 4 | const intersection_handler = (entries, observer) => { |
| 5 | entries.forEach(entry => { |
| 6 | if (entry.isIntersecting) { |
| 7 | const el = entry.target; |
| 8 |
|
| 9 | if (el.tagName === "IMG") { |
| 10 | el.src = el.src.replace(".jpg", "_full.jpg") |
| 11 | } |
| 12 | el.style.backgroundImage = el.style.backgroundImage.replace(".jpg", "_full.jpg") |
| 13 |
|
| 14 | el.classList.remove('lazy'); |
| 15 | observer.unobserve(entry.target); // Stop observing once loaded |
| 16 | } |
| 17 | }); |
| 18 | }; |
| 19 |
|
| 20 | const observer = new IntersectionObserver(intersection_handler, { |
| 21 | root: null, |
| 22 | rootMargin: "0px 0px 50px 0px", |
| 23 | threshold: 0.1 |
| 24 | }); |
| 25 |
|
| 26 | lazy.forEach(img => observer.observe(img)); |
| 27 | } |
| 28 |
|
| 29 | document.addEventListener('DOMContentLoaded', lazyload); |
| 30 |
|
Index