直接加 loading="lazy" 不能提升首屏性能，反而可能拖垮——必须仅对非首屏图片使用，且首屏图须显式设 loading="eager"；需满足真实 src、固定 width/height 属性、无干扰样式三个硬性条件才生效。
直接加 loading="lazy" 并不能提升首屏性能，反而可能拖垮它——关键在于只对非首屏图片用，且首屏图必须显式设 loading="eager"。浏览器默认就是 eager，但 Safari 等会把没声明的图也懒掉，导致 banner 白屏。
哪些图该加 loading="lazy"？
- 列表页第 3 屏之后的商品图、文章缩略图
- 长文底部的配图、评论区头像
- 不在初始 HTML 中、但由 JS 渲染的卡片图（需配合 IntersectionObserver）
不适用的情况：
-
<picture>里的<source>标签（属性必须写在最外层<img>上） - CSS 背景图、base64 或 SVG（无网络请求，懒加载无效）
- 表格
<table>内部的<img>（Chrome 对表格子元素支持弱，大概率失效） -
display: none或transform包裹的容器中（浏览器无法判断可视性）
怎么写才真正生效？三个硬性条件缺一不可
- ✅ 必须有真实
src，不能只留data-src；否则 404 或占位失败 - ✅ 必须带
width和heightHTML 属性（不是 CSS），否则 Safari 拒绝懒加载，还会引发 CLS（布局抖动） - ✅ 图片不能在首屏内，且父容器不能有
overflow: hidden、transform、visibility: hidden等干扰样式
正确示例：
<img src="cat.jpg"
srcset="cat-480.jpg 480w, cat-1024.jpg 1024w"
sizes="(max-width: 480px) 100vw, 50vw"
width="800"
height="600"
loading="lazy"
decoding="async"
alt="小猫">首屏图怎么确保秒出？
- 显式写
loading="eager"（别依赖默认） - 配合
<link rel="preload" as="image" href="hero.webp">，href 必须和<img>的src完全一致 - 禁止给 preload 的图再加
loading="lazy"（逻辑冲突，反而多一次请求） - 大图建议加
decoding="async"，避免解码卡主线程
常见翻车点自查清单
- [ ] 图片宽高是
%或vw？→ 必须是固定数值（如width="320"） - [ ] 页面用了
document.write()或同步阻塞脚本？→ 可能打断懒加载初始化 - [ ] 和 lozad.js 等库混用了？→ 原生 + JS 方案共存会重复请求
- [ ] 在 Vue/React 中动态渲染？→ 框架可能过滤
loading属性，需确认是否透传 - [ ] 测试时没关缓存？→ DevTools Network 面板勾选 “Disable cache”，滚动观察请求时机
不复杂但容易忽略。
立即学习“前端免费学习笔记（深入）”；
