过去，实现懒加载通常需要监听 scroll 事件，并结合 getBoundingClientRect() 等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。

现代浏览器提供了 Intersection Observer API，让我们得以用一种极其高效和简洁的方式来实现懒加载。多简洁？核心逻辑只需 10 行代码。

第一步：HTML 结构准备

懒加载的原理很简单：我们不直接将图片的 URL 放在 src 属性里，而是先放在一个自定义的 data-* 属性（如 data-src）中。src 属性可以指向一个极小的占位符图片（比如一个 1x1 像素的透明 GIF 或低质量的模糊图），以避免出现 broken image 图标。

第二步：JavaScript 魔法（10 行代码实现）

现在，让我们见证奇迹。创建一个 lazy-load.js 文件，并写入以下代码：

就是这样！没有复杂的计算，没有混乱的事件监听器。代码清晰、高效，并且符合现代 Web 标准。

代码解析：为什么它能工作？

Intersection Observer (交叉观察器) 是一个浏览器 API，它允许我们异步地观察目标元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。通俗地说，它能高效地告诉我们：“这个元素现在进入/离开屏幕了！”

让我们分解一下这 10 行代码：

1. document.querySelectorAll('.lazy'): 我们选中所有带有 .lazy 类的图片元素。
2. new IntersectionObserver(callback): 我们创建了一个观察器。它的构造函数接收一个回调函数，当目标元素的可见性发生变化时，这个回调函数就会被触发。
3. entries: 这是回调函数接收的参数，是一个数组，包含了所有发生可见性变化的被观察元素的信息。
4. entry.isIntersecting: 这是一个布尔值，true 代表目标元素至少有一部分进入了视口，false 则代表它完全离开了视口。这是我们实现懒加载的关键判断。
5. img.src = img.dataset.src: 一旦图片可见，我们就执行核心操作：将存储在 data-src 中的真实图片 URL 赋值给 src 属性。浏览器会自动开始下载并显示图片。
6. observer.unobserve(img): 这是至关重要的一步优化。一旦图片被加载，我们就不再需要观察它了。调用 unobserve 可以告诉观察器停止对该元素的监视，从而节省了宝贵的计算资源。
7. observer.observe(image): 最后，我们启动观察器，让它开始监视每一个需要懒加载的图片。

进阶优化：预加载

Intersection Observer 还允许我们传入一个配置对象，来更精细地控制“交叉”的定义。其中 rootMargin 属性非常有用。

rootMargin 可以在视口（root）的每一边添加一个“外边距”，提前或延迟触发回调。例如，我们可以让图片在距离进入视口还有 200px 时就开始加载。

这样设置后，用户向下滚动时，图片会“提前”加载，当图片真正进入视口时已经准备好了，体验会更加流畅。

Intersection Observer 不仅代码量极少，而且在性能上远超传统方法，因为它将复杂的计算交给了浏览器底层去高效处理，不会阻塞主线程。

阅读原文：https://mp.weixin.qq.com/s/Wa5S_BNFfQn7bwfLW6hpjg