实际项目中 rootMargin 设为 "0px 0px 200px 0px" 是较稳妥的起点，向下多观察 200px 覆盖快速滚动预加载缓冲区；移动端建议用固定像素值，PC 端可增至 300px，底部有导航栏时可用负值如 "-50px" 抵消。
IntersectionObserver 初始化时 rootMargin 设多少才合理
视口边缘留白太小，图片快进快出容易触发加载又取消；留白太大又可能提前加载太多无用资源。实际项目里 rootMargin 设为 "0px 0px 200px 0px" 是较稳妥的起点——向下多观察 200px，基本覆盖用户快速滚动时的预加载缓冲区。
注意：不能写成百分比（如 "10%"），浏览器不支持；移动端需考虑缩放和动态 viewport 变化，建议用固定像素值而非依赖设备高度。
- PC 端可适当加大，比如
"0px 0px 300px 0px" - 如果页面有固定底部导航栏，且图片靠近底部，可加负值抵消，例如
"0px 0px -50px 0px" - 设为
"0px"表示严格贴合视口边界，极易漏加载，尤其在低性能设备上
回调函数中如何安全地替换 src 而不重复加载
观察器回调可能被多次触发（如滚动抖动、resize），必须判断是否已加载完成，否则会反复设置 src 导致重复请求或图片闪烁。
推荐用 data-src 存原始地址，加载后清空或改名，并检查 img.src 是否已非占位符：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const realSrc = img.dataset.src;
if (realSrc && img.src !== realSrc) {
img.src = realSrc;
img.removeAttribute('data-src'); // 防重复
}
observer.unobserve(img); // 加载完立刻停止监听
}
});
});
为什么图片加载后没显示，或者显示成空白
常见原因不是 JS 逻辑错，而是 DOM 状态或样式干扰：
-
img元素没有设宽高，加载后尺寸塌陷，表现为“看不见”——务必提前设width/height或用aspect-ratio - CSS 中写了
opacity: 0或visibility: hidden，但没配 fade-in 动画或 JS 后续显隐控制 - 图片 URL 404 或跨域限制导致加载失败，
img的onerror未处理，看起来就是空白 - 使用了
loading="lazy"属性，它与 IntersectionObserver 冲突，浏览器可能拦截二次加载——务必移除该属性
移动端滚动卡顿？检查是否触发了 layout thrashing
在回调里频繁读取 offsetTop、getBoundingClientRect() 或操作样式，会导致强制同步布局，尤其在 iOS Safari 上明显掉帧。
IntersectionObserver 回调本身是异步且节流的，只要别在里面加额外 DOM 读取就基本安全：
- ✅ 安全操作：设置
src、添加 class、调用observer.unobserve() - ❌ 危险操作：读
img.offsetTop、查window.scrollY、用getComputedStyle() - 如果需要动画入场，用
transform+opacity，避免触发布局重排
真正容易被忽略的是：observer 实例没在组件卸载/销毁时 disconnect()，长期驻留会持续监听已移除的 DOM 节点，内存泄漏风险比卡顿更隐蔽。
