图片懒加载 — IntersectionObserver

type

status

date

slug

summary

IntersectionObserver

IntersectionObserver接口提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。祖先元素与视窗viewport被称为根(root)。

不知大家有没有发现随着网页发展，对检测某个（些）元素是否出现在可视窗相关的需求越来越多了？比如：

一直以来，检测元素的可视状态或者两个元素的相对可视状态都不是件容易事，大部分解决办法并不完全可靠，实现方式很丑陋，也极易拖慢整个网站的性能。

callback是添加监听后，当监听目标发生滚动变化时触发的回调函数。接收一个参数entries，即IntersectionObserverEntry实例。描述了目标元素与root的交叉状态。具体参数如下：

属性	说明
`boundingClientRect`	返回包含目标元素的边界信息，返回结果与element.getBoundingClientRect() 相同
`intersectionRatio`	返回目标元素出现在可视区的比例
`intersectionRect`	用来描述root和目标元素的相交区域
`isIntersecting`	返回一个布尔值，下列两种操作均会触发callback：1. 如果目标元素出现在root可视区，返回true。2. 如果从root可视区消失，返回false
`rootBounds`	用来描述交叉区域观察者(intersection observer)中的根.
`target`	目标元素：与根出现相交区域改变的元素 (Element)
`time`	返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳

options是一个对象，用来配置参数，也可以不填。共有三个属性，具体如下：

属性	说明
`root`	所监听对象的具体祖先元素。如果未传入值或值为`null`，则默认使用顶级文档的视窗(一般为html)。
`rootMargin`	计算交叉时添加到根(root)边界盒bounding box的矩形偏移量，可以有效的缩小或扩大根的判定范围从而满足计算需要。所有的偏移量均可用像素(`px`)或百分比(`%`)来表达, 默认值为"0px 0px 0px 0px"。
`threshold`	一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时，都会触发callback。默认值为0。

如果要监听某些元素，则必须要对该元素执行一下observe

方法	说明
`observe()`	开始监听一个目标元素
`unobserve()`	停止监听特定目标元素
`takeRecords()`	返回所有观察目标的IntersectionObserverEntry对象数组
`disconnect()`	使IntersectionObserver对象停止全部监听工作

代码

页面

就这么简单