IntersectionObserver如何实现图片或内容的精准懒加载？

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

概念 + IntersectionObserver 接口（来自 Intersection Observer API）为开发者提供了异步监听目标元素与其祖先或视窗（viewport）交叉状态的方法。祖先元素与视窗（viewport）被称为根（root）。+

概念

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

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

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

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

API

var io = new IntersectionObserver(callback, options)

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