如何将惰性图像元素从IntersectionObserver加载到HTML

Question

我正在使用IntersectionObserver将本应为lazily loaded的图像跟踪到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在向下滚动时按预期工作：

<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="">
...

IntersectionObserver获取了正确的元素，但我如何将图像加载到html中？

Answer 1

这似乎很好用：

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);
});