色块占位是通过策略性色彩、结构控制与动态细节优化首屏体验的轻量手段：选色需匹配场景，尺寸须防抖动，叠加纹理与动画提升流畅感，并平滑过渡至真实图片。
色块占位不是简单填个灰色，而是用有策略的色彩与结构降低用户对等待的敏感度。它不依赖图片内容，却能稳定布局、传递信息层级、配合品牌调性，是轻量又高效的首屏体验优化手段。
选对颜色：匹配场景而非随意填充
不同用途的图片适合不同底色，不是统一用#f0f0f0就万事大吉：
- 头像类：用浅蓝（如#e0f7fa）暗示信任与人本，比灰更柔和
- 商品图：选中性浅灰（如#f5f5f5），避免干扰产品判断
- 横幅/主视觉：用品牌主色低饱和度变体（如#fff8e1对应暖黄系），提前建立视觉锚点
- 文字叠底图：直接用深灰或半透黑（rgba(0,0,0,0.1)），确保后续文字可读
控制尺寸：防止布局抖动是前提
色块必须撑起准确空间，否则再好看的配色也会因重排破坏体验：
- 容器需声明
aspect-ratio（如16/9），现代浏览器自动维持宽高比 - 旧浏览器兼容方案：用
padding-top: 56.25%+position: absolute占位 - 禁止仅设
width: 100%而无高度约束——这是导致CLS（累积布局偏移）的常见原因
叠加细节：让色块“活起来”
纯色易显呆板，加一点视觉节奏就能提升感知流畅度：
- 用
linear-gradient做轻微纹理（如background: linear-gradient(90deg, #f5f5f5 25%, #e0e0e0 50%, #f5f5f5 75%)），研究显示可降低22%感知等待时间 - 配合伪元素
::before添加动态光效（shimmer动画），模拟“正在加载”的隐喻 - 在关键区域（如头像位置）加微弱圆角或描边，强化与真实内容的形态呼应
配合加载状态：色块是过渡，不是终点
色块只是中间态，要为真实图片入场留好通道：
- 图片加载完成时，用
opacity或visibility平滑切换，避免突兀闪现 - 推荐用
:has(img[src]:not([src=""]))CSS 选择器自动隐藏占位层，无需JS监听load事件（兼容Chrome 105+/Safari 15.4+） - 若需支持旧环境，JS只需添加 class（如
loaded），CSS 控制淡入，不操作DOM结构
