图片未设宽高或aspect-ratio会导致加载前盒模型缺失，引发文字上推重排；应优先用aspect-ratio+width控制，辅以CSS背景占位和load/error双监听保障渲染稳定。
必须给图片容器设宽高或 aspect-ratio
不设尺寸的 <img> 在加载完成前没有盒模型，文字会突然上推，这是浏览器渲染流里「空间缺失」导致的强制重排，不是 CSS 动画问题。
直接写 width 和 height 属性已不推荐（HTML5 中语义弱、无法响应式），改用 CSS 控制：
-
aspect-ratio: 16/9+width: 100%是首选，兼容现代浏览器且能随父容器缩放 - 若需支持 Safari 15.3 及更早版本，加回退：
height: 0; padding-bottom: 56.25%（配合position: relative） - 禁用
min-height或max-width替代——它们不参与初始布局计算，无法阻止塌陷
用 CSS 背景做静态占位，别依赖外部 placeholder 服务
第三方占位图（如 placeholder.com）在离线、DNS 故障或服务下线时直接失效；纯 CSS 渐变或 base64 模糊图无网络请求，稳定可控。
最简可用方案：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
.img-wrapper {
background: linear-gradient(#e0e0e0, #f5f5f5);
background-size: cover;
}
- 渐变比纯色更能暗示「此处有图」，避免被当成空内容
- LQIP 模糊图用 base64 嵌入，控制在 2–3KB 内，用
background-image: url('data:image/jpeg;base64,...') - 慎用
background-position: center——若真实图比例与容器不一致，会裁切；建议background-size: contain; background-repeat: no-repeat
load 和 error 事件必须成对监听，不能只靠 opacity 切换
仅用 opacity: 0 → 1 过渡，在图片加载失败时会留下透明空框，用户看到的是“不可见的错误”。
基础 JS 控制逻辑要覆盖两种终态：
const img = document.querySelector('img[data-src]');
img.addEventListener('load', () => img.classList.add('loaded'));
img.addEventListener('error', () => {
img.classList.add('loaded');
img.src = '/fallback.png';
});
- 用
classList切换状态比直改style.opacity更利于 CSS 维护和复用 - 如果用了
loading="lazy"，load仍会触发，但首次滚动前不会预加载——这点要和设计确认是否接受首屏空白 - 别在
load回调里再setAttribute('src', ...)——会导致二次请求（尤其当 src 已存在时）
懒加载场景下，decode() 比 onload 更可靠
原生 onload 在缓存命中时可能不触发，或在解码失败时静默跳过；img.decode() 返回 Promise，确保图像真正可渲染。
实操建议：
- 对关键图或需精确控制显隐时机的场景，优先用
img.decode().then(...) - 必须搭配
onerror监听——decode()抛错后不会自动触发load事件 - IntersectionObserver 触发后，先设
src，再调decode()，不要设完就认为“已就绪”
复杂点在于：decode() 不是所有浏览器都支持（IE 全挂，Safari 14.1+ 才完整），但只要用了 loading="lazy"，基本已放弃 IE；真正容易被忽略的是——它不处理格式降级失败（比如 <picture> 里所有 <source> 都不支持时，img 的 src 加载失败仍需兜底）。
