IntersectionObserver

2020-09-22 本文已影响0人冷暖自知_zjz

IntersectionObserver

参考：

IntersectionObserver 监听元素是否进入了可视区域。

在没有这个api的时候为了实现监听元素是否进入了可视区域需要监听scroll事件，得到它对应于视口的坐标，再判断是否在视口之内。

用法：

var io = new IntersectionObserver(callback, option);

IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

构造函数的返回值是一个观察器实例。实例的observe方法可以指定观察哪个 DOM 节点。

// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

话不多说先看下面的例子(滚动加载)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body{
      height: 100%;
      width: 600px;
      margin: 0 auto;
    }
    #top{
      height: 101%;
      background-color: aqua;
    }
    #observe{
      height: 5px;
      width: 100%;
    }
    .add{
      height: 300px;
      width: 100%;
      background-color: pink;
      border:1px solid aqua;
    }
  </style>
</head>
  <body>
    <div id="top"></div>
    <div id="observe"></div>
    <script>
        var top = document.getElementById('top');
        var observe = document.getElementById('observe')
        function addElement(){
           var c = document.createElement('div');
            c.classList.add("add")
            document.querySelector('body').appendChild(c)
            observe.parentNode.insertBefore(c, observe)
        }
        const intersectionObserver = new IntersectionObserver((entries) => {
            for (entry of entries) {
                // 当observe元素可见时执行加载
                if (entry.target.id == 'observe' && entry.isIntersecting) {
                  addElement()
                }
            }
        });
        // 观测observe
        intersectionObserver.observe(observe);
  </script>
  </body>
</html>

当元素在容器里面滚动怎么办？

var option = { 
  // 设置根元素  
  root: document.querySelector('.container'),
  // 定义根元素的margin
  rootMargin: "500px 0px" 
};
var observer = new IntersectionObserver(
  callback,
  option
)

例子2 图片懒加载

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <img src="eg.jpg" alt="" data-img="./1.jpg"><br>
    <img src="eg.jpg" alt="" data-img="./2.jpg"><br>
    <img src="eg.jpg" alt="" data-img="./3.jpg"><br>
    <img src="eg.jpg" alt="" data-img="./4.jpg"><br>
    <img src="eg.jpg" alt="" data-img="./5.jpg"><br>
  </div>
  <script>
    const imgs = document.querySelectorAll('[data-img]');
    const intersectionObserver = new IntersectionObserver((entries) => {
        for (entry of entries) {
            if (entry.isIntersecting) {
              console.log(entry.target.dataset.img);
              //当图片可见时把data-img的值赋值给src实现懒加载
              entry.target.src = entry.target.dataset.img;
              intersectionObserver.unobserve(entry.target);
            }
        }
    },{threshold: [0.5]});
    imgs.forEach((item) => {
        intersectionObserver.observe(item)
    });
</script>
</body>
</html>

IntersectionObserverEntry 对象（‘entries’是一个数组，每个成员都是一个）

IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性。

{
    time: 6789.92,
    rootBounds: ClientRect {},
    boundingClientRect: ClientRect {},
    intersectionRect: ClientRect {},
    intersectionRatio: 0.5,
    target: element,
    isIntersecting: true
}

每个属性的含义如下。

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
isIntersecting：只读isIntersecting属性是一个布尔值，它是true如果与相交观察者的根目标元素相交。如果是true，则IntersectionObserverEntry描述转换为相交状态；否则为。如果是false，则您知道过渡是从相交到不相交。

IntersectionObserver

IntersectionObserver

猜你喜欢

热点阅读