IntersectionObserver怎么实现懒加载
时间: 2023-05-24 07:07:20 浏览: 123
IntersectionObserver是一种新的API,可以用于实现懒加载。懒加载是指在页面滚动时,只加载可视区域内的内容,而不是一次性加载所有内容。这样可以优化网页加载速度,提升用户体验。
下面是IntersectionObserver实现懒加载的步骤:
1. 创建一个IntersectionObserver对象:可以通过其构造函数创建。
2. 选取需要进行懒加载的图片或其他DOM元素,将其包裹在一个容器元素中。
3. 使用IntersectionObserver对象的observe方法来观察容器元素。
4. 在回调函数中获取到可见性变化的元素,如果元素进入可视区域,就将其src属性指向真实图片的地址,实现图片的懒加载。
下面是一个示例代码:
```
let lazyImages = document.querySelectorAll('.lazy-image');
let options = {
root: null, // 窗口视图作为根元素
rootMargin: '0px', // 不添加边框
threshold: 0.1 // 当可见性达到10%时触发回调
};
let observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) { // 元素进入可见视图
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
observer.unobserve(lazyImage); // 取消观察
}
});
}, options);
lazyImages.forEach(lazyImage => {
observer.observe(lazyImage);
});
```
在上面的代码中,我们首先选取了所有带有lazy-image类的图片元素,然后创建了一个IntersectionObserver对象,指定了观察的根元素和触发回调的阈值。接着,我们遍历了所有图片元素,使用observe方法观察了每个元素。在回调函数中,我们判断元素是否进入了可视区域,如果是,就将该元素的data-src属性值赋给src属性,实现懒加载,然后取消对该元素的观察。最后,我们通过forEach方法将所有图片元素添加到IntersectionObserver的观察列表中。
注意,容器元素的宽高需要在CSS中指定,否则IntersectionObserver无法准确计算元素的可见性。同样,图片元素的真实地址需要通过data-src属性指定,而不是src属性。