loading="lazy"仅控制加载时机，不提供占位功能，未加载时会留白塌陷、引发FOUC；需配合data-src+占位图+宽高属性+IntersectionObserver实现稳定懒加载与占位。
为什么 loading="lazy" 不能直接当占位用
浏览器原生的 loading="lazy" 只控制加载时机，不提供占位行为——图片没加载时会留白、塌陷布局，甚至触发 FOUC。它不是占位方案，而是加载策略。真要“懒加载+占位”，得自己管高度/背景/过渡。
用 data-src + CSS 占位最稳
主流做法是把真实地址存在 data-src，用 src 放一个极小的 base64 占位图（或纯色背景），再靠 JS 触发加载。关键点在：保持宽高比、避免重排、防重复加载。
- 给
width和height属性（或 CSSaspect-ratio），否则懒加载后尺寸突变 - 占位图推荐 1×1 的 base64：
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==，体积小、无渲染开销 - JS 判断进入视口后，把
data-src赋给src，再移除data-src防二次触发 - 加
fade-in过渡更友好：opacity: 0; transition: opacity .3s; &[src] { opacity: 1; }
IntersectionObserver 比 scroll 事件更靠谱
监听 scroll 容易卡顿、漏触发；IntersectionObserver 是浏览器原生异步回调，性能好、兼容性够（Chrome 51+/Firefox 55+）。
- 初始化时只观察
img[data-src]，不查全部img - 设
rootMargin: '50px'提前加载，避免滚动过快时白屏 - 观察到后立即
unobserve()，避免反复回调 - 降级方案：如果
IntersectionObserver不存在，fallback 到getBoundingClientRect()简单判断
别忽略 srcset 和 sizes 的懒加载适配
响应式图片里 srcset 和 sizes 必须和 src 一起迁移，否则高 DPR 设备可能加载错尺寸。
- 把
data-srcset和data-sizes一并存上，加载时同步赋值 - 注意 Safari 对空
srcset的处理：赋值前确保srcset是空字符串或有效值，别留srcset="" - 如果用了
data-srcset
实际最易出问题的是宽高丢失和 srcset 同步遗漏——这两处一错，懒加载就变成布局抖动加载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
