模糊占位图通过先显示小尺寸高斯模糊缩略图再平滑过渡至高清图，提升加载感知速度；需满足尺寸≤100px、文件≤1KB、比例一致、高斯模糊自然；CSS或动画控制200–400ms渐变去模糊；配合懒加载、双缓存及失败兜底（色块/SVG/重试）实现完整体验。
用模糊预览图做占位，核心是“先给个影子，再补上细节”——不是等高清图加载完才显示，而是立刻呈现一张小尺寸、高模糊的缩略图，再平滑过渡到清晰原图。这种做法不加快真实网络速度，但显著提升用户对“加载快”的主观感受。
选对模糊图：小、快、准
模糊占位图不是随便糊一下就行。它得满足三个条件：
- 尺寸极小：建议宽高不超过100像素，文件体积控制在1KB以内，确保毫秒级加载；
- 模糊方式合理：用高斯模糊（Gaussian Blur）比均值模糊更自然，避免马赛克感；
- 比例与原图一致：防止页面布局抖动，比如原图是4:3，占位图也必须是4:3。
实现过渡动画：让模糊“呼吸”起来
从模糊到清晰不能靠硬切，要靠渐变式动画衔接视觉断层：
- Android端常用
ValueAnimator控制Bitmap的模糊半径，从15px逐步降到0； - Web端可用CSS滤镜动画：
filter: blur(12px)→filter: blur(0)，配合transition: filter 300ms ease-out； - 关键细节：动画时长建议200–400ms，太短像闪屏，太长让用户误以为卡顿。
搭配懒加载与缓存，效果翻倍
模糊占位图只是体验起点，需和底层机制协同：
- 图片进入视口前，用
IntersectionObserver或Image()对象预取模糊图，确保一滚动就立刻可见； - 高清图加载时启用内存+磁盘双缓存（如Glide/Fresco），避免重复下载；
- 服务端可配合生成两套图：一套
thumbnail.webp?blur=10作占位，一套原图，由前端按需请求。
别忽略失败兜底
网络异常或图片404时，模糊图也不能消失：
- 设置默认占位色块（如根据图片主色调生成的背景色），保持容器尺寸稳定；
- 加载失败后显示带重试按钮的提示层，而不是留白或报错图标；
- 对关键图片（如商品主图、头像），可降级为本地SVG占位，彻底规避网络依赖。
