Intersection Observer API 能高效实现图片懒加载，通过监听元素是否进入视口，避免频繁触发重绘。首先选中带有 data-src 属性的图片，创建 IntersectionObserver 实例并在回调中判断元素可见性，将 data-src 赋值给 src 以加载图片，随后停止监听。可设置 rootMargin 提前加载、用 CSS 固定占位防止抖动，并添加淡入动画优化体验，兼顾老浏览器时可引入 polyfill。该方法比传统 scroll 事件更流畅高效。
懒加载图片能提升页面性能，Intersection Observer API 是实现它的现代方式。相比传统的 scroll 事件监听，它更高效、更流畅，不会频繁触发重绘或重排。
什么是 Intersection Observer API
Intersection Observer 允许你监听一个元素是否进入视口。你不需要手动计算位置或绑定 scroll 事件，浏览器会在元素接近可视区域时通知你。
核心思路是：给所有需要懒加载的图片设置一个占位属性（如 data-src），初始不加载真实图片。当元素进入视口时，再把 data-src 的值赋给 src，触发加载。
基本实现步骤
以下是使用 Intersection Observer 实现图片懒加载的关键步骤：
- 选中所有带有 data-src 属性的图片元素
- 创建 IntersectionObserver 实例，配置回调函数
- 在回调中判断元素是否进入视口，如果是，替换 src 并停止监听
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
});
images.forEach(img => {
imageObserver.observe(img);
});
优化与注意事项
为了让懒加载体验更好，可以加入一些优化手段：
- 设置 rootMargin 提前加载图片，比如 { rootMargin: '50px' }，让用户还没滚动到时图片就已经开始加载
- 给图片设置固定宽高或 CSS 容器占位，避免加载时页面跳动
- 加载完成后可以添加淡入动画，提升视觉体验
- 注意老浏览器兼容性，可引入 polyfill 支持 IE
