图片懒加载优化（IntersectionObserver）

使用场景

一般来说，浏览器中的图片都是在加载的时候全部准备完毕呈现给我们，但是往往浏览器中的一些图片，我们并不需要，一下子都请求完毕，对于浏览器来说，性能大大降低。大家可以类比一下淘宝，要是所有的图片都加载出来的话，那性能可想而知。

解决方案

1. 监听scroll事件，计算目标元素距离顶部的距离减去页面滑出的距离；如果大于0且小于窗口的高度则表明是可见的。

   注：该方法对于性能的要求比较高，需要做节流控制。

2. 使用IntersectionObserver，这是浏览器原生提供的一个构造函数，它可以自动观察目标元素的可见性变化。

   注：这个构造方法，对于一些旧的浏览器可能不支持，用的时候需要注意。但大部分情况下是可以用的~

IntersectionObserver使用

// 创建一个观察实例,其中option是可选的。各种参数看注意点。
var io = new IntersectionObserver(callback, option);

// 开始观察，接受一个dom节点对象，对于多个节点对象，需要遍历observe。
io.observe(document.querySelectorAll('img'))

// 停止观察，同样，停止观察多个节点，也需要遍历unobserve
io.unobserve(element);

// 关闭观察器
io.disconnect();

注意点：

1. 构造函数中第一个参数，回调方法callback的参数为：

var io = new IntersectionObserver(
  entries => {
    console.log(entries);
  }
)

entries本身是一个数组，即被观察的元素集合。具体参数如下：

time：// 可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：// 被观察的目标元素，是一个 DOM 节点对象
rootBounds：// 根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：// 目标元素的矩形区域的信息
intersectionRect：// 目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：// 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

其中：

intersectionRatio<=0表示不可见，>0表示可见，这个经常用到，值得关注下。

举个栗子：

// html部分
<template>
  <div class="container">
    <h1>测试图片懒加载</h1>
    <div>
      <img data-src="../assets/img/test-lazy-img/1.jpg">
      <img data-src="../assets/img/test-lazy-img/timg.jpg">
      <img data-src="../assets/img/test-lazy-img/1.jpg">
      <img data-src="../assets/img/test-lazy-img/2.jpg">
      <img data-src="../assets/img/test-lazy-img/3.jpg">
      <img data-src="../assets/img/test-lazy-img/4.jpg">
      <img data-src="../assets/img/test-lazy-img/5.jpg">
      <img data-src="../assets/img/test-lazy-img/6.jpg">
      <img data-src="../assets/img/test-lazy-img/7.jpg">
    </div>
  </div>
</template>

// js部分
  doLoad() {
      const imgs = document.querySelectorAll("img"); //获取所有待观察的目标元素
      function lazyLoad(target) {
        const observer = new IntersectionObserver((entries, observer) => {
          entries.forEach((entrie) => {
            if (entrie.isIntersecting) {
              // 进入可见范围内
              const img = entrie.target;
              const src = img.getAttribute("data-src");
              img.setAttribute("src", src);
              observer.unobserve(img); // 停止监听已开始加载的图片
            }
          });
        }, {});
        observer.observe(target);
      }

      imgs.forEach(lazyLoad);
    },

2. 构造函数中第二个参数，option是一个对象，具体参数为：

{
    threshold:[0,0.5,1]， // 规定什么时候触发回调函数，图片0%可见，50%可见，100%可见时触发。
    rootMargin："200px 100px 30px 20px" // 默认可视区域就是整个浏览器窗口，但是我们也可以自行设置，遵循css设置，"上右下左"
}