IntersectionObserver 实现页面懒加载最轻量高效，无需监听 scroll/resize，浏览器原生支持；核心三步：创建观察器、配置 threshold/rootMargin、调用 observe，加载后及时 unobserve。
页面懒加载用 IntersectionObserver 实现最轻量、性能最好，不用监听 scroll 或 resize，浏览器原生支持，兼容性已覆盖主流现代浏览器（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）。
基本用法：监听元素是否进入视口
创建观察器实例，传入回调函数和配置项，再调用 observe() 开始监听目标元素：
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));
常用配置项说明
threshold：触发回调的可见比例阈值，可为单个数字（如 0、0.5）或数组（如 [0, 0.25, 0.5, 0.75, 1]），值越小越早触发；
root：指定滚动容器（默认是浏览器视口），比如设为某个 div 元素，就以该容器为“视口”来判断是否相交；
立即学习“Java免费学习笔记（深入）”；
rootMargin：类似 CSS 的 margin，用于扩大或缩小判定区域，例如 '50px 0px' 表示提前 50px 开始加载（上边距 +50px，触发更早）；
trackVisibility 和 delay：高级选项，仅在部分浏览器支持，一般不需要手动设置。
实用技巧与注意事项
- 加载完成后及时调用
unobserve(el)，避免反复执行；若需复用（如列表滚动中反复进出），可不取消，但要在回调里加状态判断（如if (el.loaded) return）； - 图片加载失败时建议 fallback 处理，比如显示占位图或错误提示；
- 服务端渲染（SSR）场景下，注意只在客户端初始化
IntersectionObserver，避免 Node 环境报错； - 旧浏览器不支持时，可用 polyfill（如 w3c 官方 polyfill），或退化为 scroll 监听（慎用，注意节流）。
封装一个可复用的懒加载 Hook（类 React 场景）
简单封装便于组件内调用：
function 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 <img ref={ref} data-src={src} src={placeholder} alt="" />;
}
基本上就这些。核心就三步：创建 observer、设定阈值、observe 目标——不复杂但容易忽略 unobserve 和 rootMargin 的灵活运用。
