网页DOM露出一半才投递, 如何实现性能较好?_dom只显示了一半是什么原因-CSDN博客

本文链接：https://blog.csdn.net/allen8612433/article/details/117372812

要求:

今天遇到一个需求, 产品要求每个"内容"露出一半才对这个内容单独投递.

每个内容包含一张图片两行标题.

如果有广告遮盖, 也不投递.

刚开始想到, 用onScroll监听滚动事件,

可是每次滚动都要遍历这些内容,

判断它们的位置大小, 与浏览器窗口大小做计算, 看看露出多少.

这个计算实现起来, 估计性能不会好.

实现出来的代码也不会优雅.

IntersectionObserver

搜索了一下, 找到一个IntersectionObserver对象.

它可以用于监听某个对象的露出状态的改变.

可以用于chrome 51+.

我开发的页面是基于embedded chrome,

在devtools的console试了一下, 能使用.

用法如下:

let intersect = new IntersectionObserver((data)=>{
   if (data?.[0]?.intersectionRatio > 0.5) {           // 显示超过一半时投递
      // TODO: send pingback
  }
});

intersect.observe(document.getElementById("xxx"));     // 监听某ID
intersect.unobserve(document.getElementById("xxx"));   // 取消监听某ID

前面提到的每个内容是用poster组件实现.

在组件内给节点设置ID,

根据ID做监听, 即可完成需求要求的投递.