图片加载前空白的本质是 img 未获尺寸与内容，浏览器无法渲染；解决核心是提前声明占位尺寸并用背景色/图兜底，结合 object-fit 控制填充、加载过渡动画提升体验。
图片加载前显示空白，本质是 img 元素还没拿到尺寸和内容，浏览器无法渲染，就留出默认的“无宽高”区域（常表现为 0×0 或内联替换元素的基线对齐导致的底部留白）。解决核心是：提前告诉浏览器该占多大位置，并用背景图或样式兜底。
用 background-image 替代 src 做占位 + 渐进加载
不直接写 <img src="...">，改用 div + background-image，天然支持加载前显示占位色/图：
- 给容器设固定宽高（如
width: 300px; height: 200px;），避免重排 - 用
background-color: #f5f5f5;或 base64 小图做初始占位 - 图片加载完成后再用 JS 切换为真实图片：
el.style.backgroundImage = "url(…)" - 可配合
background-size: cover;和background-position: center;控制显示效果
保留 img 标签，用 padding-bottom 实现响应式占位
适用于需要 SEO、语义化或懒加载的场景。原理是利用 padding 百分比基于父容器宽度计算，模拟宽高比：
- 外层容器设
position: relative; - 内部伪元素或子 div 设
padding-bottom: 56.25%;（16:9 = 9÷16≈56.25%） - img 绝对定位铺满，
top: 0; left: 0; width: 100%; height: 100%; - 这样即使图片未加载，容器高度也已预留，不会闪动或跳动
object-fit 配合明确宽高，控制图片填充方式
仅当 img 已有确定宽高（内联或 CSS 指定）时，object-fit 才生效。它不解决空白问题，但能防止拉伸变形，让占位更可控：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover;—— 等比缩放填满，裁剪多余部分（最常用） -
object-fit: contain;—— 等比缩放，完整显示，可能留白 - 务必搭配
width和height，否则 object-fit 无效 - 可加
object-position: center;微调焦点区域
额外建议：加载状态 + 过渡动画
提升体验的小细节：
- 给 img 加
opacity: 0; transition: opacity 0.3s; - 监听
load事件后加 class（如.loaded），设opacity: 1; - 加载失败时用
onerror回退到占位图：<img src="x" onerror="this.src='/placeholder.png'"> - 慎用
display: none;占位——会破坏文档流，影响布局稳定性
基本上就这些。关键不是选哪种方案，而是根据是否需要语义、是否要 SEO、是否用懒加载来决定。background 占位灵活可控，img + object-fit 更标准易维护，两者不互斥，可以组合用。
