第7期 懒加载和曝光埋点

IntersectionObserver

// 添加监听 以及监听目标发生滚动时触发的回调函数 以及一些可选参数
const Observer = new IntersectionObserver((items)=>{
    // 当监听目标发生滚动变化时触发的回调函数 不是一滚动就触发
    items.foreach((item)=>{
        item.isIntersecting // 返回一个布尔值，如果目标元素出现在root可视区，返回true。 如果从root可视区消失，返回false。
        item.intersectionRatio // 返回目标元素出现在可视区的比例 item.intersectionRatio == 1 为全部出现
        Observer.unobserve(item.target); // 停止监听特定目标元素
    })
},{
    root：null,// 所监听对象的具体祖先元素。如果未传入值或值为null，则默认使用顶级文档的视窗(一般为html)。
    // 还有别的 暂时没用到 先不记录
})

Observer.observe(DOM); // 开始监听一个目标元素
Observer.takeRecords(); //返回所有观察目标的IntersectionObserverEntry对象数组
Observer.disconnect(); // 使IntersectionObserver对象停止全部监听工作

图片懒加载

const imgList = [...document.querySelectorAll('img')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // isIntersecting是一个Boolean值，判断目标元素当前是否可见
    if (item.isIntersecting) {
      item.target.src = item.target.dataset.src
      // 图片加载后即停止监听该元素
      io.unobserve(item.target)
    }
  })
}, {
  root: document.querySelector('.root')
})

// observe遍历监听所有img节点
imgList.forEach(img => io.observe(img))

埋点曝光

假如有个需求，对一个页面中的特定元素，只有在其完全显示在可视区内时进行埋点曝光。

const boxList = [...document.querySelectorAll('.box')]

var io = new IntersectionObserver((entries) =>{
  entries.forEach(item => {
    // intersectionRatio === 1说明该元素完全暴露出来，符合业务需求
    if (item.intersectionRatio === 1) {
      // 。。。 埋点曝光代码
      io.unobserve(item.target)
    }
  })
}, {
  root: null,
  threshold: 1, // 阀值设为1，当只有比例达到1时才触发回调函数
})

// observe遍历监听所有box节点
boxList.forEach(box => io.observe(box))

参考来源

作者：Va007

链接：juejin.cn/post/684490…

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。