1

IntersectionObserver使用介绍

 3 years ago
source link: https://yazhen.me/_posts/2020/IntersectionObserver%E4%BD%BF%E7%94%A8%E4%BB%8B%E7%BB%8D/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
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();

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK