如何详细说明IntersectionObserver实现图片懒加载的步骤？

本文共计1476个文字，预计阅读时间需要6分钟。

概念 + IntersectionObserver 接口（从属于 Intersection Observer API）为开发者提供了一种可以异步监听目标元素与其祖先或视窗（viewport）相交状态的手柄。祖先元素与视窗（viewport）被视为根（root）。

概念

IntersectionObserver接口(从属于Intersection Observer API)为开发者提供了一种可以异步监听目标元素与其祖先或视窗(viewport)交叉状态的手段。祖先元素与视窗(viewport)被称为根(root)。

这是MDN上给的官方概念，不用去管它，我粘出来只是为了显得专业点嘛...

重点看这里 监听目标元素与其祖先或视窗交叉状态的手段 ，其实就是观察一个元素是否在视窗可见。

可以看到，交叉了就是说明当前元素在视窗里，当前就是可见的了。

API

var io = new IntersectionObserver(callback, options)

其实就是一个简单的构造函数。

以上代码会返回一个 IntersectionObserver 实例， callback 是当元素的可见性变化时候的回调函数， options 是一些配置项（可选）。

我们使用返回的这个实例来进行一些操作。