必须为图片容器设置明确宽高或aspect-ratio，配合CSS占位（如渐变/ base64模糊图）和load/error事件控制显隐，避免布局抖动与白屏。
图片加载前白屏或抖动，直接加固定宽高容器
不设尺寸的 <img> 标签在加载完成前没有占位空间，会导致文字上推、布局跳动。这不是 CSS 动画问题，是浏览器渲染流里「盒模型缺失」造成的。
必须给父容器设定明确的 width 和 height，哪怕只是临时值：
<div class="img-wrapper" style="width: 300px; height: 200px;"> <img src="real.jpg" alt="内容"> </div>
- 不要依赖
img自身的width/height属性（HTML5 中已不推荐，且不触发容器占位） - 如果尺寸不确定，用 CSS aspect-ratio 配合 object-fit：比如
aspect-ratio: 4/3; width: 100%; - 避免用
min-height或max-width替代，它们无法阻止初始渲染时的空白塌陷
用 CSS 背景图做静态占位，不发请求也能显示
比起外链占位图服务（如 placeholder.com），纯 CSS 渐变或 base64 模糊图更可靠——没网络也能显示，也不怕第三方服务下线。
最简方案是单色渐变占位：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
.img-placeholder {
background: linear-gradient(#e0e0e0, #f5f5f5);
background-size: cover;
}
- 渐变比纯色更耐看，且能暗示「这里有图」而非「这里没东西」
- 若需模糊缩略图效果（LQIP），把 base64 图嵌进
background-image，大小控制在 2–3KB 内 - 慎用
background-position: center—— 如果图片实际宽高比和容器不一致，会裁切；建议搭配background-size: contain+background-repeat: no-repeat
监听 load 事件控制真实图片显隐，别只靠 opacity
仅用 opacity: 0 → 1 切换，容易在加载失败时留白。必须同时处理 error 事件，否则用户看到的是透明空框。
基础 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') —— 这会造成二次加载
第三方占位图服务现在还能用吗？选哪个最稳
截至 2026 年 4 月，via.placeholder.com 和 placehold.it 已不可访问；dummyimage.com 仍可服务但不支持中文文本；loremflickr.com 响应慢且有跨域限制。
目前可用且较稳的选择只有两个：
-
https://picsum.photos/300/200：返回真实照片，无文字，适合视觉稿阶段 -
https://http2.ml/300x200（国内镜像）：支持颜色与文字，如https://http2.ml/300x200/4a90e2/ffffff?text=测试图，响应快、无墙
注意：所有外链占位图都应在上线前替换为真实资源，否则影响 LCP 和 SEO —— 占位图本身不是内容，只是开发期过渡手段。
