JavaScript图片懒加载核心是按需加载，使用IntersectionObserver替代scroll监听，配合data-src与loading="lazy"，缓存DOM查询、处理加载失败并避免性能陷阱。
JavaScript 实现图片懒加载，核心是“按需加载”——只在图片即将进入视口时才请求并渲染，避免页面初始化时大量图片资源阻塞主线程和带宽。性能优化的关键不在“加功能”，而在“减负担”：减少 DOM 查询、避免频繁重排重绘、降低监听开销、合理降级兼容性。
用 IntersectionObserver 替代 scroll 事件监听
传统方案监听 scroll 事件并手动计算元素位置，容易触发高频回调、造成卡顿，且需自行节流防抖。现代推荐使用 IntersectionObserver，它由浏览器原生实现，异步执行、不阻塞渲染，且能精准感知元素是否可见。
- 创建观察器时设置
rootMargin（如"50px"）可提前加载，提升滚动流畅感 - 对已加载的图片调用
unobserve()，避免持续监听无意义元素 - 不支持旧浏览器（如 IE）时，可用
getBoundingClientRect()+ 节流scroll作为降级方案
HTML 结构配合 data-src 与 loading="lazy"
语义化标记是懒加载的基础。图片初始不设 src，改用自定义属性（如 data-src）存真实地址；同时启用原生 loading="lazy" 作为兜底或辅助：
-
- 原生
loading="lazy"在 Chrome/Firefox 等中自动生效，无需 JS，但兼容性有限（不支持 Safari 旧版、不支持背景图等） - JS 加载成功后，将
data-src值赋给src，再移除data-src防止重复加载
加载失败时提供降级与监控
网络波动或路径错误会导致图片加载失败，直接影响用户体验。应主动捕获并处理：
立即学习“Java免费学习笔记（深入）”；
- 为
onerror，替换为备用图或隐藏占位符 - 记录失败 URL 和触发时机（如通过
console.warn或上报埋点），便于定位资源问题 - 避免无限重试：单张图片最多尝试 1–2 次，失败后不再轮询
避免常见性能陷阱
懒加载本身是优化手段，但实现不当反而拖慢页面：
- 不要在每次
observe()前反复查询 DOM（如document.querySelectorAll('img[data-src]')），应缓存目标元素列表 - 避免在回调中直接修改多个样式或触发布局（如读取 offsetTop 后立即改 className），可合并操作或用
requestIdleCallback延后执行 - 移动端注意
passive: true（用于降级 scroll 监听），防止默认行为被意外阻止影响滚动体验
不复杂但容易忽略：懒加载不是“越早加载越好”，而是“刚好够用”。结合用户滚动速度、设备性能、网络类型（如通过 navigator.connection.effectiveType 判断 2g/4g）做动态策略，才是进阶方向。
