图片懒加载的核心是延迟非首屏图片加载以提升首屏性能，可通过loading="lazy"原生实现或IntersectionObserver精准控制，配合占位图、服务端缓存及格式优化，并需区分语义重要性合理应用。
首屏性能优化中，图片懒加载的核心是让非首屏图片延迟加载，只在用户即将看到时才发起请求，从而减少初始 HTML 渲染时的资源阻塞、降低带宽消耗、提升 LCP（最大内容绘制）指标。
用 loading="lazy" 属性快速启用原生懒加载
现代浏览器（Chrome 76+、Edge 79+、Firefox 75+、Safari 15.4+）已原生支持 img 标签的 loading 属性：
- 直接在
<img>标签中添加loading="lazy"，浏览器会自动在图片进入视口前约 1250px（可变）时开始加载； - 首屏图片（
loading="eager"或不设该属性）仍会立即加载，确保关键内容不被延迟； - 注意：
loading="lazy"对 CSS 背景图、<iframe>也有效，但背景图需配合background-image的动态设置才能真正懒加载。
用 Intersection Observer 精准控制懒加载逻辑
当需要兼容旧浏览器、自定义加载时机（如提前 200px 加载）、或结合占位图/错误重试时，推荐使用 IntersectionObserver：
- 监听图片是否进入视口，触发后才设置
src（或srcset）； - 避免频繁调用
getBoundingClientRect()或监听scroll，性能更优； - 示例关键逻辑：
<img src="placeholder.svg" class="lazy">
观察器回调中将el.dataset.src赋给el.src，并移除lazy类以避免重复处理。
配合低质量占位图（LQIP）或骨架屏提升感知性能
懒加载本身有空白期，用户可能看到“闪动”或留白。可通过以下方式缓解：
立即学习“Java免费学习笔记（深入）”；
- 用 base64 编码的极小尺寸缩略图作为
src，真实图通过data-src延迟加载； - 用 CSS 骨架屏（如灰色块 + 动画）占位，图片加载完成后再 fade-in 替换；
- 对响应式图片，记得同步设置
srcset和sizes，避免懒加载后因尺寸判断不准导致高清图未加载。
注意服务端与 CDN 的协同优化
懒加载只是前端策略，需和服务端配合才能发挥最大效果：
- 确保图片资源开启 HTTP 缓存（
Cache-Control: public, max-age=31536000），避免重复加载； - 使用现代格式（WebP/AVIF）并配置 CDN 自动转码，减小体积；
- 对关键首屏图，禁用懒加载，并预加载（
<link rel="preload" as="image" href="hero.jpg">）以加速 LCP。
不复杂但容易忽略：懒加载不是“越多越好”，要区分语义重要性——轮播图第二屏、列表页滚动后的内容适合懒加载；而 banner 主图、商品主图等首屏核心图像必须立即加载。
