原生 loading="lazy" 不支持自定义滚动偏移量，仅在图片进入视口时加载；需用 IntersectionObserver 配合 data-src 和 rootMargin（如 '200px'）实现提前加载，并注意 HTML 结构、宽高设置及兼容性。
什么是 loading="lazy" 的偏移问题
原生 loading="lazy" 不支持自定义滚动偏移量——它只在图片进入视口（viewport）时才开始加载，没有类似 IntersectionObserver 的 rootMargin 那样的配置项。如果你发现图片总是在快进到视口才加载、导致轻微“闪一下”，那不是 bug，是它的设计限制。
用 IntersectionObserver 手动实现带偏移的延迟加载
真正可控的方式是放弃 loading="lazy"，改用 IntersectionObserver + data-src + JS 控制。关键在于设置 rootMargin 参数，比如提前 200px 加载：
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
observer.unobserve(img);
}
});
},
{ rootMargin: '200px' } // ← 这就是偏移量
);
-
rootMargin: '200px'表示在视口上下各扩展 200px，图片离视口还有 200px 时就触发加载 - 支持写成
'100px 0px 200px'（上右下左），适配不同方向偏移需求 - 注意：如果页面有固定 header，且希望图片在 header 下方就加载，用
rootMargin: '-60px 0px 0px'把视口往上推 60px
HTML 结构必须配合 data-src 属性
不能直接写 src，否则浏览器会立即请求图片。正确写法是：
<img alt="描述" class="lazy">
- 必须用
data-src存真实地址，src留空或指向占位图（如src="data:image/svg+xml,%3Csvg...%3E"） - 建议加
class="lazy"或其他标识，方便document.querySelectorAll('.lazy')统一观察 - 别忘了给图片设宽高或
aspect-ratio，避免布局抖动
兼容性与性能取舍点
IntersectionObserver 在 Chrome 51+/Firefox 55+/Safari 12.1+ 原生支持，IE 完全不支持。如果需兼容老版本，得引入 polyfill，但多数现代项目可放心用。
立即学习“前端免费学习笔记（深入）”；
- 比起原生
loading="lazy"，手动方案多一次 JS 解析和 DOM 查询，但换来精确控制权 - 大量图片时，建议节流
observer实例，不要为每个<img>单独 new 一个 - 服务端渲染（SSR）场景下，初始 HTML 里仍要保留
data-src，JS 在客户端激活后接管
偏移量不是越大越好——设成 '500px' 可能导致首屏外大量图片提前加载，浪费带宽。实际值得结合用户平均滚动速度、首屏高度和图片密度来试。
