IntersectionObserver实现图片懒加载（超详细！）

关于IntersectionObserver 官方上说明是提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根（root）。

具体的内容可以参考官网解释：https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

这里我们主要来用IntersectionObserve来实现图片的懒加载。

图片的懒加载原理可以分为三步 ：

1. 我们先定义好img元素，我们也可以通过DOM动态添加，可以预先定义好img元素，并给他们一个基础的加载的图片作为公共图片。
2. 给每个img元素加上data-src来存放真正图片的资源。
3. 我们通过图片在整个界面的高度位置来和目前可视区域的高度进行比较，如果在可是区域内就进行图片资源的加载，不然就先不加载，从而提高性能。

在这里我们通过IntersectionObserve来实现图片懒加载。IntersectionObserver是浏览器原生提供的构造函数，他支持一个回调函数和，一个可选参数。

const intersectionObserve = new IntersectionObserver(callback, option)

callback的回调函数用来 处理浏览器可视区域的变化，option是一个可选的配置对象。

callback():

  当目标元素可视性变化时就会执行的函数。

option:

配置选项，其中包括root, rootMargin, thresholds

1.   root: 所监听对象的具体祖先元素，若未指定则默认顶级元素
2.   rootMargin: 计算交叉时添加到根边界盒的矩形偏移量，可以有效的放大和缩小根的判定范围。
3.   thresholds: 一个阈值数组每个阈值都是交叉区域和边界区域的比例，当监听对象的可视部分穿过阈值时就会指向指定的