| const webps = document.querySelectorAll(".webp"); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach((entry) => { | |
| if (entry.isIntersecting) { | |
| const img = entry.target; | |
| const currentSrc = img.src; | |
| img.src = ""; // clear to force reload | |
| img.src = currentSrc; // reassign original src to reload | |
| } | |
| }); | |
| }, { | |
| threshold: 0.5 // trigger when at least 50% of the webp is visible | |
| }); | |
| webps.forEach((webp) => observer.observe(webp)); | |