I am using an IntersectionObserver to track images that are supposed to be lazily loaded into a gallery component.
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 upon scrolling down works as intended:
<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="">
...
The IntersectionObserver grabs the correct elements but how do I load the images into the html?
This seems to work just fine:
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);
});