window的IntersectionObserver特性使用
程序员文章站
2022-07-12 18:16:17
...
前言
翻vant源码,看到有使用IntersectionObserver属性,才疏学浅的我居然不知道是啥玩意,百度一番,确实是个好东西!
IntersectionObserver主要用于元素可见性的监听,比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新,存在兼容性问题,好在已经有了兼容的polyfill.其基本介绍和使用方式都可以在该polyfill对应网站上看到。
使用场景
1.图片懒加载
监听scroll方式(旧):
window.addEventListener('scroll', lazyload);
function lazyload() {
const imgs = document.querySelector('.img');
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
imgs.forEach((img) => {
const imgOffsetH = util.getPosition(img).top;
// 距离页面顶部的距离 <= 视窗高 + 往上滚进去的距离
if(imgOffsetH <= innerHeight + scrollTop) {
img.src = img.getAttribute('data-src');
}
})
}
说明: 距离页面顶部的距离 <= 视窗高 + 往上滚进去的距离,即算做图片可见了才加载它,性能较差
IntersectionObserver监听元素可见方式(新):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((img) => {
if(!img.isIntersecting) return;
img.src = img.getAttribute('data-src');
io.unobserve(img);
})
}, {
//即滚动到距离底部50px时开始算交互区
rootMargin:'0px 0px 50px 0px'
})
imgs.forEach((img) => {
io.observe(img);
})
说明: 原生的功能,不会引起性能损耗,rootMargin阈值直观
2.滚动分页
监听scroll方式(旧):
window.addEventListener('scroll', () => {
const innerHeight = util.innerHeight();
const scrollTop = util.scrollTop();
const scrollHeight = util.scrollHeight();
// 滚动到距离底部50px
if(innerHeight + scrollTop >= scrollHeight - 50) {
loadMore();
}
});
说明:视窗高+往上滚进去的距离>= 页面高,来作为加载新的一页的条件,性能较差
IntersectionObserver监听元素可见方式(新):
const io = new IntersectionObserver((entrys) => {
entrys.forEach((entry) => {
if(!entry.isIntersecting) return;
loadMore();
})
}, {
rootMargin:'0px 0px 50px 0px'
})
//监听最底部的loadmore是否出现
const lMore = document.querySelector('.load-more');
io.observe(lMore);
说明:性能上仍然更胜一筹,不必每次都去判断视窗高、滚进去的距离等等