图片懒加载的核心是延迟非首屏图片加载以提升首屏性能，可通过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></iframe>也有效，但背景图需配合background-image的动态设置才能真正懒加载。
用 Intersection Observer 精准控制懒加载逻辑
当需要兼容旧浏览器、自定义加载时机（如提前 200px 加载）、或结合占位图/错误重试时，推荐使用 IntersectionObserver：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 监听图片是否进入视口，触发后才设置
src（或srcset）； - 避免频繁调用
getBoundingClientRect()或监听scroll，性能更优； - 示例关键逻辑：
观察器回调中将el.dataset.src赋给el.src，并移除lazy类以避免重复处理。
配合低质量占位图（LQIP）或骨架屏提升感知性能
懒加载本身有空白期，用户可能看到“闪动”或留白。可通过以下方式缓解：
- 用 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 主图、商品主图等首屏核心图像必须立即加载。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
