IntersectionObserver 实现页面懒加载最轻量高效，无需监听 scroll/resize，浏览器原生支持；核心三步：创建观察器、配置 threshold/rootMargin、调用 observe，加载后及时 unobserve。
页面懒加载用
实现最轻量、性能最好，不用监听 scroll 或 resize，
浏览器
原生支持，兼容性已覆盖主流现代浏览器（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）。
基本用法：监听元素是否进入视口
创建观察器实例，传入
回调函数
和配置项，再调用
开始监听目标元素：
常用配置项说明
threshold
：触发回调的可见比例阈值，可为单个数字（如
、
）或数组（如
），值越小越早触发；
root
：指定滚动容器（默认是浏览器视口），比如设为某个 div 元素，就以该容器为“视口”来判断是否相交；
立即学习
“
Java免费学习笔记（深入）
”；
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
rootMargin
：类似 CSS 的 margin，用于扩大或缩小判定区域，例如
表示提前 50px 开始加载（上边距 +50px，触发更早）；
trackVisibility
和
delay
：高级选项，仅在部分浏览器支持，一般不需要手动设置。
实用技巧与注意事项
加载完成后及时调用
，避免反复执行；若需复用（如列表滚动中反复进出），可不取消，但要在回调里加状态判断（如
）；
图片加载失败时建议 fallback 处理，比如显示占位图或错误提示；
服务端渲染（SSR）场景下，注意只在客户端初始化
，避免 Node 环境报错；
旧浏览器不支持时，可用 polyfill（如
w3c 官方 polyfill
），或退化为 scroll 监听（慎用，注意节流）。
封装一个可复用的懒加载 Hook（类 React 场景）
简单封装便于组件内调用：
基本上就这些。核心就三步：创建 observer、设定阈值、observe 目标——不复杂但容易忽略 unobserve 和 rootMargin 的灵活运用。
IntersectionObserverobserve()const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素进入视口，执行加载逻辑（如图片 src、组件渲染等）
const img = entry.target;
img.src = img.dataset.src; // 加载真实图片
observer.unobserve(img); // 加载完即停止观察，避免重复触发
}
});
}, {
threshold: 0.1 // 当 10% 可见时就触发回调
});
// 观察所有带 data-src 的图片
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
00.5[0, 0.25, 0.5, 0.75, 1]'50px 0px'unobserve(el)if (el.loaded) returnIntersectionObserverfunction useLazyLoad(callback) {
const observerRef = useRef(null);
useEffect(() => {
observerRef.current = new IntersectionObserver(
(entries) => entries.forEach(e => e.isIntersecting && callback(e.target)),
{ threshold: 0.05 }
);
return () => observerRef.current?.disconnect();
}, []);
return (node) => {
if (node && observerRef.current) {
observerRef.current.observe(node);
}
};
}
// 在组件中使用
function LazyImage({ src, placeholder }) {
const ref = useLazyLoad((el) => {
el.src = src;
});
return ;
}