标签：const img 特性 util window IntersectionObserver 0px 监听

前言

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

说明：性能上仍然更胜一筹，不必每次都去判断视窗高、滚进去的距离等等

标签：const,img,特性,util,window,IntersectionObserver,0px,监听
来源： https://blog.csdn.net/var_deng/article/details/119349017

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。