图片懒加载的核心判断逻辑是当图片即将进入视口时触发加载，依赖IntersectionObserver监听交叉状态变化，通过threshold和rootMargin精准控制加载时机。
图片懒加载的核心判断逻辑是什么
懒加载不是“等用户滚动到图片位置才加载”，而是“当图片即将进入视口时触发加载”。IntersectionObserver 的本质是监听目标元素与根容器（通常是视口）的交叉状态变化，它不依赖 scroll 事件，因此没有节流、抖动、性能卡顿问题。
关键点在于：它只在元素真正开始进入或离开视口时回调，且可配置 threshold 控制触发时机——比如设为 [0, 0.1] 表示元素顶部刚触达视口底部，或已有 10% 进入视口时就加载。
如何用 IntersectionObserver 加载 data-src 图片
典型场景是页面中大量 data-src 存真实地址，占位图用 src 指向小尺寸 base64 或默认灰图。Observer 一旦发现元素“可见”，就将 data-src 赋给 src，并移除监听（避免重复触发）。
- 必须提前把
data-src值存在元素上，不能靠 JS 动态拼接 URL，否则无法解耦加载逻辑 - 加载后建议设置
img.src = img.dataset.src后立即清空dataset.src，防止后续 observer 再次误判 - 加载失败时应 fallback 到占位图，并调用
observer.unobserve(img)避免无限重试
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const src = img.dataset.src;
if (!src) return;
img.src = src;
delete img.dataset.src;
observer.unobserve(img);
}
});
}, {
threshold: 0.05 // 提前 5% 进入就加载
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
rootMargin 怎么影响懒加载时机
rootMargin 是字符串，类似 CSS margin 语法（如 "0px 0px 200px 0px"），它会扩大或缩小“根容器”的判定边界。对懒加载最常用的是向下扩展：让图片还没真正滚动进视口时就触发加载，避免用户快速滚动时出现白屏或闪烁。
立即学习“前端免费学习笔记（深入）”；
- 设为
"0px 0px 300px 0px"表示在元素底部距离视口底部还有 300px 时就开始加载 - 负值（如
"0px 0px -100px 0px"）会让触发更晚，一般不推荐用于懒加载 - 如果页面有固定头部遮挡，可用
rootMargin: "60px 0px 0px 0px"抵消 header 高度，确保图片不被遮住才加载 - 注意：该值不支持百分比，只能是 px / em / rem 等绝对单位
兼容性差怎么办？要不要降级
IE 完全不支持 IntersectionObserver，Safari 12.1+ 才支持，但大多数现代项目已无需兼容 IE。真要保旧，别写复杂 polyfill——直接降级为 getBoundingClientRect() + scroll 监听即可，仅需几十行代码。
- 降级方案只需监听
window.onscroll，遍历所有待加载图片，用el.getBoundingClientRect().top 判断是否进入视口 - 务必手动节流（如
setTimeout防抖），否则快速滚动时性能爆炸 - 移动端要注意
position: fixed头部/底部导致getBoundingClientRect计算偏移异常，需额外减去 fixed 元素高度 - 绝大多数情况建议直接使用原生 API，通过构建工具（如 Webpack）按需注入 polyfill，而不是在业务代码里混写两套逻辑
真正容易被忽略的是：图片加载完成后，img.naturalWidth === 0 可能持续几十毫秒，此时读取尺寸会出错；如果后续有基于尺寸的布局计算（如 Masonry），得监听 load 事件再执行。
