Estoy usando un IntersectionObserver para rastrear imágenes que se supone que se lazily loaded en un componente de gallery .
html :
<div id="gallery" class="gallery"> <div class="gallery-card"> <a href="#"><img src="../../images/1.jpg"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/2.jpg" class="lazy"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/3.jpg" class="lazy"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/4.jpg" class="lazy"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/5.jpg" class="lazy"></a> <a href="#"><img src="../../images/ph.png" data-src="../../images/6.jpg" class="lazy"></a> </div> </div> js :
let config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; const observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if(entry.isIntersecting) { console.log(entry.target) // load entry.target element in the html component // preloadImage(entry.target); self.unobserve(entry.target); } }); }, config); const lazyImages = document.querySelectorAll('[data-src]'); lazyImages.forEach(img => { observer.observe(img); }); Output al desplazarse hacia abajo funciona según lo previsto:
<img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/2.jpg" class="lazy" data-v-434bdd8c=""> <img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/3.jpg" class="lazy" data-v-434bdd8c=""> <img src="/images/ph.png?3d03f427893c28791c9e0b8a347a277d" data-src="../../images/4.jpg" class="lazy" data-v-434bdd8c=""> ... El IntersectionObserver toma los elementos correctos, pero ¿cómo cargo las imágenes en el html ?
Esto parece funcionar bien:
let config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; const observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if(entry.isIntersecting) { const img = entry.target img.src = img.dataset.src self.unobserve(img); } }); }, config); const lazyImages = document.querySelectorAll('[data-src]'); lazyImages.forEach(img => { observer.observe(img); });