固定阈值在电商详情页易失效，因滚动快、内容密、区块可视性差异大；应为不同区块设差异化rootMargin，并结合滚动速度动态触发加载，禁用loading="lazy"而手动控制src。
为什么固定阈值在电商详情页上容易失效
电商详情页滚动快、内容密、首屏外资源多（主图轮播、图文详情、推荐列表），threshold: 0.1这种通用值在快速滑动时会明显滞后——用户已看到第5张图，第3张才刚触发加载，造成白屏或占位符闪烁。更麻烦的是，不同区块可视性差异大：Banner区需提前加载（防滚动卡顿），而“猜你喜欢”模块可延后（用户未必看）。固定阈值无法区分这些场景。
如何为不同区块设置差异化 rootMargin
用同一个 IntersectionObserver 实例，但对不同区域的 img 调用 observe() 时传入独立配置：
-
Banner 区域：提前加载，rootMargin: "0px 0px 300px 0px"（向下扩展300px） -
图文详情区：平衡体验与带宽，rootMargin: "0px 0px 200px 0px" -
推荐商品区：保守加载，rootMargin: "0px 0px 100px 0px"（仅略提前）
注意：rootMargin 是字符串，不能写成数字数组；所有值必须带单位（px 或 %），否则整个 observer 失效。
动态阈值比静态 threshold 更适合用户行为
单纯靠 threshold 判断“可见比例”在电商页不实用——用户可能斜向快速滑动，或缩放页面，导致 entry.intersectionRatio 波动剧烈。更可靠的做法是结合滚动速度做动态判断：
立即学习“前端免费学习笔记（深入）”；
let lastScrollY = window.scrollY;
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
const currentScrollY = window.scrollY;
const scrollSpeed = Math.abs(currentScrollY - lastScrollY);
lastScrollY = currentScrollY;
<pre class='brush:php;toolbar:false;'>if (entry.isIntersecting || scrollSpeed > 100) {
// 快速滚动时主动触发加载，避免空白
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}}); }, { rootMargin: "0px 0px 200px 0px" });
这个逻辑绕过了 threshold 的僵硬限制，但要注意：只在滚动明显加速时放宽条件，避免误触；scrollSpeed > 100 需根据真实设备调试，PC端通常设为 80–120，移动端建议 40–60。
loading="lazy" 在电商页几乎不可直接启用
别被“原生懒加载”误导。电商详情页里大量图片来自 CDN 动态拼接 URL（如 https://cdn.example.com/img.jpg?w=750&h=1000），而 loading="lazy" 只认静态 src，遇到带查询参数的 URL 时兼容性极差；更关键的是，它无法配合 srcset + sizes 做响应式尺寸选择——用户从横屏切到竖屏再滚动，浏览器可能拉错分辨率图片。
真正要落地，必须手动控制：data-src 存原始 URL，JS 中根据 window.devicePixelRatio 和容器宽度动态生成最终 src，再赋值。这步绕不开，也别试图用 loading="lazy" 省事。
