图片懒加载的核心是“按需加载”，即只在图片即将进入视口时才请求和渲染，避免初始加载大量图片导致卡顿、内存飙升和带宽浪费；现代浏览器通过loading="lazy"原生支持，零JS、开箱即用，但仅适用于<img>和<iframe>；需配合IntersectionObserver实现自定义逻辑、占位策略及兼容性兜底，并结合响应式图片与现代格式优化单图体积。
图片懒加载的核心是“按需加载”——只在图片即将进入视口时才开始请求和渲染，避免一次性加载成百上千张图片导致内存飙升、首屏卡顿、带宽浪费。对长列表尤其关键，它不是锦上添花，而是性能底线。
用 loading="lazy" 做最简兜底
现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）原生支持 loading="lazy" 属性，只需给 <img> 加上即可：
它由浏览器内部的 Intersection Observer 机制驱动，开箱即用、零 JS、兼容性好。对普通长列表（如商品卡片、文章缩略图），这是首选方案。注意：该属性对 <iframe> 也有效，但不支持背景图或 CSS background-image。
手动监听视口 + Intersection Observer 精准控制
当需要自定义加载逻辑（比如加占位图、错误重试、预加载邻近项）或兼容老浏览器时，用 IntersectionObserver 更可靠：
立即学习“前端免费学习笔记（深入）”；
- 创建观察器，设定阈值（如
{ threshold: 0.1 }表示图片顶部距视口还有 10% 高度时就触发） - 把真实图片地址存在
data-src，初始src设为空或低清占位图 - 回调中判断是否可见，是则赋值
src，并调用unobserve()防止重复触发 - 滚动频繁时，Observer 自动节流，无需手动防抖
相比老式 scroll 事件监听，它不阻塞主线程，性能更稳。
配合骨架屏与占位策略减少空白感
懒加载会让图片“突然出现”，影响体验。建议：
- 用纯色块或 SVG 骨架图占位，宽度/高度固定（避免布局偏移 CLS）
- 设置
width和height属性或 CSS aspect-ratio，让浏览器提前预留空间 - 加载失败时显示 fallback 图标或文字，而非留白
- 对首屏附近几张图可取消懒加载（加
loading="eager"），提升感知速度
服务端配合：响应式图片 + WebP/AVIF
懒加载解决“何时加载”，但单张图体积过大仍拖慢体验。必须同步优化：
- 用
<picture>+srcset提供不同分辨率版本，让设备下载合适尺寸 - 优先输出 WebP 或 AVIF 格式（比 JPEG 小 30%-50%），后端自动转码或 CDN 支持
- 长列表中，可对非首屏图片启用更低质量压缩（如 60% 质量 WebP）
- 避免 base64 内联大图，它会阻塞 HTML 解析且无法缓存
