图片懒加载的现代 JavaScript 实现，仅需 10 行代码
过去，实现懒加载通常需要监听 scroll 事件，并结合 getBoundingClientRect() 等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。
现代浏览器提供了 Intersection Observer API，让我们得以用一种极其高效和简洁的方式来实现懒加载。多简洁？核心逻辑只需 10 行代码。
第一步：HTML 结构准备
懒加载的原理很简单：我们不直接将图片的 URL 放在 src 属性里，而是先放在一个自定义的 data-* 属性（如 data-src）中。src 属性可以指向一个极小的占位符图片（比如一个 1x1 像素的透明 GIF 或低质量的模糊图），以避免出现 broken image 图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>现代图片懒加载</title>
<style>
/* 给图片一个最小高度，以便在加载前占据空间 */
img {
display: block;
margin-bottom: 50px;
min-height: 200px;
background-color: #f0f0f0; /* 简单的占位背景色 */
}
</style>
</head>
<body>
<h1>向下滚动查看图片懒加载效果</h1>
<!-- 使用 class="lazy" 来标识需要懒加载的图片 -->
<!-- src 指向一个占位符，data-src 存放真实图片地址 -->
<img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?nature" alt="Lazy Loaded Image 1">
<img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?city" alt="Lazy Loaded Image 2">
<img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?people" alt="Lazy Loaded Image 3">
<img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?tech" alt="Lazy Loaded Image 4">
<img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?space" alt="Lazy Loaded Image 5">
<script src="lazy-load.js"></script>
</body>
</html>第二步：JavaScript 魔法（10 行代码实现）
现在，让我们见证奇迹。创建一个 lazy-load.js 文件，并写入以下代码：
// 1. 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');
// 2. 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
// 3. 遍历所有被观察的元素
entries.forEach(entry => {
// 4. 如果元素进入视口
if (entry.isIntersecting) {
const img = entry.target;
// 5. 将 data-src 的值赋给 src
img.src = img.dataset.src;
// 6. 移除 'lazy' 类，可选，但便于管理
img.classList.remove('lazy');
// 7. 停止观察该图片，释放资源
observer.unobserve(img);
}
});
});
// 8. 让 observer 开始观察所有懒加载图片
lazyImages.forEach(image => {
observer.observe(image);
});就是这样！没有复杂的计算，没有混乱的事件监听器。代码清晰、高效，并且符合现代 Web 标准。
代码解析：为什么它能工作？
Intersection Observer (交叉观察器) 是一个浏览器 API，它允许我们异步地观察目标元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。通俗地说，它能高效地告诉我们：“这个元素现在进入/离开屏幕了！”
让我们分解一下这 10 行代码：
- document.querySelectorAll('.lazy'): 我们选中所有带有 .lazy 类的图片元素。
- new IntersectionObserver(callback): 我们创建了一个观察器。它的构造函数接收一个回调函数，当目标元素的可见性发生变化时，这个回调函数就会被触发。
- entries: 这是回调函数接收的参数，是一个数组，包含了所有发生可见性变化的被观察元素的信息。
- entry.isIntersecting: 这是一个布尔值，true 代表目标元素至少有一部分进入了视口，false 则代表它完全离开了视口。这是我们实现懒加载的关键判断。
- img.src = img.dataset.src: 一旦图片可见，我们就执行核心操作：将存储在 data-src 中的真实图片 URL 赋值给 src 属性。浏览器会自动开始下载并显示图片。
- observer.unobserve(img): 这是至关重要的一步优化。一旦图片被加载，我们就不再需要观察它了。调用 unobserve 可以告诉观察器停止对该元素的监视，从而节省了宝贵的计算资源。
- observer.observe(image): 最后，我们启动观察器，让它开始监视每一个需要懒加载的图片。
进阶优化：预加载
Intersection Observer 还允许我们传入一个配置对象，来更精细地控制“交叉”的定义。其中 rootMargin 属性非常有用。
rootMargin 可以在视口（root）的每一边添加一个“外边距”，提前或延迟触发回调。例如，我们可以让图片在距离进入视口还有 200px 时就开始加载。
const options = {
root: null, // 使用浏览器视口作为根
rootMargin: '0px 0px 200px 0px', // 在底部增加 200px 的外边距
threshold: 0 // 只要有 1 像素交叉就触发
};
const observer = new IntersectionObserver(callback, options);这样设置后，用户向下滚动时，图片会“提前”加载，当图片真正进入视口时已经准备好了，体验会更加流畅。
Intersection Observer 不仅代码量极少，而且在性能上远超传统方法，因为它将复杂的计算交给了浏览器底层去高效处理，不会阻塞主线程。
