懒加载是前端性能优化的重要方案，核心思路是当元素进入视口范围时才加载对应资源，避免页面初始加载过多不必要的资源。Intersection Observer API是浏览器原生提供的接口，专门用于异步监测目标元素与祖先元素或视口的交叉状态，相比传统的滚动事件监听方案，它不需要频繁计算元素位置，也不会阻塞主线程，能实现更高效的懒加载效果。
Intersection Observer API基础用法
使用Intersection Observer API首先需要创建观察者实例，核心步骤包括定义回调函数、配置观察选项、指定观察目标三个部分。
1. 创建观察者实例
通过IntersectionObserver构造函数创建实例，第一个参数是交叉状态变化时的回调函数，第二个参数是可选的配置对象，用来设置观察的阈值、根元素等参数。
// 创建IntersectionObserver实例
const observer = new IntersectionObserver((entries) => {
// entries是所有被观察元素的交叉状态变化数组
entries.forEach(entry => {
// 判断元素是否进入视口
if (entry.isIntersecting) {
console.log('元素进入视口', entry.target);
// 这里可以执行加载资源的逻辑
}
});
}, {
// 根元素，默认是浏览器视口，也可以指定其他滚动容器
root: null,
// 根元素的margin，用来提前触发加载，比如提前100px触发
rootMargin: '0px 0px -100px 0px',
// 阈值，表示目标元素可见比例达到多少时触发回调，0.1表示可见10%时触发
threshold: 0.1
});
2. 指定观察目标
创建实例后，通过observe方法指定需要观察的DOM元素，当元素与视口的交叉状态满足配置条件时，就会触发回调函数。
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy-image');
// 遍历元素，逐个添加到观察者中
lazyImages.forEach(img => {
observer.observe(img);
});
实现图片懒加载完整示例
下面演示一个完整的图片懒加载实现，核心逻辑是把图片的真实地址放在data-src自定义属性中，当图片进入视口时，把data-src的值赋值给src属性，完成图片加载，同时停止对该元素的观察。
<!-- HTML结构 --> <div class="image-container"> <img class="lazy-image" data-src="https://ipipp.com/image1.jpg" alt="示例图片1"> <img class="lazy-image" data-src="https://ipipp.com/image2.jpg" alt="示例图片2"> <img class="lazy-image" data-src="https://ipipp.com/image3.jpg" alt="示例图片3"> </div>
// JavaScript逻辑
document.addEventListener('DOMContentLoaded', () => {
// 创建观察者实例
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
// 判断元素是否进入视口
if (entry.isIntersecting) {
const img = entry.target;
// 获取data-src中的真实图片地址
const realSrc = img.getAttribute('data-src');
if (realSrc) {
// 赋值给src属性，触发图片加载
img.src = realSrc;
// 加载完成后可以移除data-src属性
img.removeAttribute('data-src');
}
// 图片加载后停止观察该元素，避免重复触发
imageObserver.unobserve(img);
}
});
}, {
// 提前200px触发加载，提升用户体验
rootMargin: '0px 0px 200px 0px',
threshold: 0
});
// 获取所有懒加载图片并添加观察
const lazyImages = document.querySelectorAll('.lazy-image');
lazyImages.forEach(img => {
imageObserver.observe(img);
});
});
实现列表项懒加载
除了图片，列表项的懒加载也是常见场景，比如长列表滚动时，只加载进入视口的列表项内容，避免一次性渲染过多DOM节点。实现思路和图片懒加载类似，只是加载的内容从图片地址换成了列表项的业务数据。
// 模拟列表数据
const listData = Array.from({ length: 50 }, (_, i) => `列表项内容 ${i + 1}`);
// 当前已加载的索引
let currentIndex = 0;
// 每次加载的数量
const pageSize = 10;
// 创建列表容器
const listContainer = document.querySelector('.list-container');
// 创建哨兵元素，用来监测是否需要加载更多
const sentinel = document.querySelector('.list-sentinel');
// 加载列表项的函数
function loadListItems() {
const fragment = document.createDocumentFragment();
// 计算本次加载的结束索引
const endIndex = Math.min(currentIndex + pageSize, listData.length);
for (let i = currentIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.className = 'list-item';
item.textContent = listData[i];
fragment.appendChild(item);
}
listContainer.insertBefore(fragment, sentinel);
currentIndex = endIndex;
// 如果所有数据都加载完成，停止观察哨兵元素
if (currentIndex >= listData.length) {
listObserver.unobserve(sentinel);
}
}
// 创建观察者实例监测哨兵元素
const listObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 哨兵元素进入视口，加载更多列表项
loadListItems();
}
});
});
// 开始观察哨兵元素
listObserver.observe(sentinel);
// 初始加载第一批数据
loadListItems();
与传统懒加载方案对比
传统的懒加载方案通常监听scroll事件，在回调中通过getBoundingClientRect等方法计算元素位置判断是否进入视口，这种方式存在明显的性能问题：
- 滚动事件触发频率极高，即使加了节流，仍可能造成主线程阻塞
- 频繁计算元素位置会触发浏览器的重排重绘，增加性能开销
- 需要手动处理兼容不同浏览器的滚动逻辑，代码复杂度高
而Intersection Observer API的优势非常明显：
- 异步执行，不会阻塞主线程，性能开销极低
- 不需要手动计算元素位置，浏览器底层自动处理交叉状态监测
- 是浏览器原生API，兼容性覆盖主流现代浏览器，无需额外引入第三方库
- 配置灵活，可以通过
rootMargin提前触发加载，提升用户体验
注意事项
在使用Intersection Observer API实现懒加载时，需要注意以下几点：
- 观察完成后及时调用
unobserve方法停止观察，避免不必要的回调触发 - 如果页面中存在多个不同的懒加载场景，建议创建不同的观察者实例，避免配置冲突
- 对于不支持该API的低版本浏览器，可以做降级处理，回退到传统的滚动事件监听方案
rootMargin的配置值如果是负数，表示元素进入视口一定距离后才触发，正数表示提前触发，需要根据实际场景调整
Intersection_Observer_API懒加载前端性能优化JavaScript修改时间：2026-07-03 00:24:21