图片延迟加载（Lazy Loading Images）是一种优化网页性能的技术，它仅在图片即将进入用户的视口（viewport）时才加载它们。这可以减少初始页面加载时间，降低带宽使用，并提高用户体验。Intersection Observer API 提供了一种原生的、高效的方法来实现这一功能。
Intersection Observer API 简介
Intersection Observer API 允许你异步地观察一个或多个目标元素与其祖先元素或顶级文档视口（viewport）交叉状态的变化。当被观察的目标元素的可见性发生变化时，你可以收到一个回调，并且可以执行相应的操作，比如加载图片。
使用 Intersection Observer 实现图片延迟加载
以下是一个基本的例子，展示了如何使用 Intersection Observer API 来实现图片的延迟加载：
- HTML 结构：
<img data-src="image-url.jpg" class="lazy-load" alt="Description of image">
<!-- 你可以为需要延迟加载的图片添加 data-src 属性，并给它们一个共同的类名，比如 lazy-load -->
注意，这里使用了 data-src 而不是 src，因为初始时我们不想加载这些图片。
- CSS 样式（可选）：
.lazy-load {
opacity: 0;
transition: opacity 0.3s;
}
.lazy-load.loaded {
opacity: 1;
}
这些样式用于在图片加载完成后逐渐显示它们。
- JavaScript 代码：
// 选择所有需要延迟加载的图片
const lazyImages = document.querySelectorAll('img.lazy-load');
// 创建一个 Intersection Observer 实例
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 当图片进入视口时，加载图片
const img = entry.target;
img.src = img.dataset.src;
img.classList.add('loaded');
// 停止观察这个图片
observer.unobserve(img);
}
});
}, {
// 配置选项，比如视口阈值
root: null, // 默认为视口
rootMargin: '0px',
threshold: 0.1 // 当图片至少有10%进入视口时触发
});
// 开始观察每个图片
lazyImages.forEach(img => {
observer.observe(img);
});
在这个例子中，我们首先选择了所有带有 lazy-load 类的图片。然后，我们创建了一个 IntersectionObserver 实例，它会在图片进入视口（根据我们设置的阈值）时触发回调函数。在回调函数中，我们设置图片的 src 属性为 data-src 属性的值，并添加一个 loaded 类来触发 CSS 过渡效果。最后，我们停止观察这个已经加载的图片。
注意事项
- 确保你的网站在不支持
Intersection Observer API的浏览器上也能正常工作。你可以使用polyfill或回退到其他懒加载技术，比如滚动事件监听器。 - 考虑到用户体验和性能，合理设置
IntersectionObserver的配置选项，比如threshold和rootMargin。 - 如果你的图片有占位符或加载中的提示图，确保在图片加载完成前显示它们。
通过使用 Intersection Observer API，你可以实现高效且用户友好的图片延迟加载功能。