图片懒加载的核心是“按需加载”，即只在图片即将进入视口时才发起请求，以降低首屏带宽消耗和渲染压力；推荐使用 Intersection Observer API 实现，兼容主流浏览器，配合 data-src 和 src 切换、rootMargin 配置及 unobserve 优化；降级方案为节流 scroll + getBoundingClientRect；可辅以 loading="lazy" 原生属性和加载状态/错误处理提升体验。
图片懒加载的核心是“按需加载”——只在图片即将进入视口时才发起请求，避免首屏加载大量离屏图片，从而显著降低初始网络带宽消耗和页面渲染压力。
利用 Intersection Observer API 实现现代懒加载
这是目前最推荐的方式，无需监听 scroll 事件，性能好、兼容性佳（主流浏览器均支持）。
- 为需要懒加载的图片设置
data-src存放真实地址，src可留空或用占位图（如 1×1 透明 GIF） - 创建
IntersectionObserver实例，监听图片是否进入视口（可配置rootMargin提前触发） - 回调中将
data-src赋值给src，并调用unobserve()避免重复加载
降级方案：监听 scroll + getBoundingClientRect
适用于需兼容 IE 或极老版本浏览器的场景，但要注意节流和性能优化。
- 用
throttle控制 scroll 触发频率（如 50ms 间隔） - 遍历所有待加载图片，用
el.getBoundingClientRect().top <= window.innerHeight判断是否接近视口 - 加载后移除该元素监听逻辑，避免反复计算
配合 loading="lazy" 属性做基础层优化
HTML 原生懒加载，简单有效，适合大多数常规图片。
立即学习“Java免费学习笔记（深入）”；
- 直接在
<img>标签上添加loading="lazy"（Chrome 76+、Firefox 75+、Safari 15.4+ 支持） - 对
<iframe>同样生效，且无需 JS - 注意：它不能替代 JS 懒加载（比如需要自定义占位、错误处理、预加载等场景），但可作为兜底或简化方案
增强体验：加载状态与错误处理
懒加载不只是“延迟请求”，还要保障用户体验不掉线。
- 加载中显示骨架图或淡入动画（可通过 CSS
opacity过渡实现） - 图片
onload后移除占位样式，onerror时替换为备用图或提示 - 对关键首屏图（如 banner 主图）可跳过懒加载，或使用
fetchpriority="high"提升优先级
不复杂但容易忽略：懒加载效果依赖资源路径正确性和网络环境判断，上线前建议用 DevTools 的 “Network → Disable cache” 和 “Throttling” 模拟弱网验证实际收益。
