Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

IntersectionObserver使用介绍

发布于:  

在移动端,有个很重要的概念,叫做懒加载, 适用于一些图片资源特别多,ajax数据特别多的页面中, 经常会有动态加载数据的场景中, 这个时候,我们通常是使用监听scroll或者使用setInterval来判断, 元素是否进入视图,其中scroll由于其特别大的计算量,会有性能问题,而setInterval由于其有间歇期,也会出现体验问题。

浏览器原生提供的API IntersectionObserver 可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。

简单立即就懂的例子:

class Demo extends React.Component {
  state = {
    plateList: [],
  };

  called = false;
  componentDidMount() {
    const callback = (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !this.called) {
          this.called = true;
          service(this.props.row.symbol)
            .then(res => {
              this.setState({
                plateList: res,
              });
            });
        }
      });
    };

    const observer = new IntersectionObserver(callback);

    const target = ReactDOM.findDOMNode(this);
    observer.observe(target);

  }

  render() {
    return <div>...</div>
  }
}

想看详细往下接着看。

var observer = new IntersectionObserver(callback,options);

IntersectionObserver支持两个参数:

callback 是当被监听元素的可见性变化时,触发的回调函数

options 是一个配置参数,可选,有默认的属性值

官方提供一个例子

//初始化一个实例
var observer = new IntersectionObserver(changes => {
    for (const change of changes) {
        console.log(change.time);
        // Timestamp when the change occurred
        // 当可视状态变化时,状态发送改变的时间戳
        // 对比时间为,实例化的时间,
        // 比如,值为1000时,表示在IntersectionObserver实例化的1秒钟之后,触发该元素的可视性变化

        console.log(change.rootBounds);
        // Unclipped area of root
        // 根元素的矩形区域信息,即为getBoundingClientRect方法返回的值

        console.log(change.boundingClientRect);
        // target.boundingClientRect()
        // 目标元素的矩形区域的信息

        console.log(change.intersectionRect);
        // boundingClientRect, clipped by its containing block ancestors,
        // and intersected with rootBounds
        // 目标元素与视口(或根元素)的交叉区域的信息

        console.log(change.intersectionRatio);
        // Ratio of intersectionRect area to boundingClientRect area
        // 目标元素的可见比例,即intersectionRect占boundingClientRect的比例,
        // 完全可见时为1,完全不可见时小于等于0

        console.log(change.target);
        // the Element target
        // 被观察的目标元素,是一个 DOM 节点对象
        // 当前可视区域正在变化的元素

    }
}, {});

// Watch for intersection events on a specific target Element.
// 对元素target添加监听,当target元素变化时,就会触发上述的回调
observer.observe(target);

// Stop watching for intersection events on a specific target Element.
// 移除一个监听,移除之后,target元素的可视区域变化,将不再触发前面的回调函数
observer.unobserve(target);

// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();

~^_^~ 一片小花园 ?

赏赐