blur-up 实现依赖占位图+data-src分离+onload切换class，非纯css；需设固定宽高防抖动，移动端慎用blur-md以上滤镜。
直接用 blur-md 加在 <img> 上不会自动触发渐进式加载——它只是个 CSS 滤镜，不感知加载状态。真正起作用的是「占位图 + 高清图分离 + onload 切换 class」这一整套配合。
blur-up 的 HTML 结构必须分离 src 和 data-src
浏览器会立即请求 src，所以它必须是极小的占位图（≤2 KB），比如 20×15 像素的 JPEG；高清图地址只能存在 data-src 里，避免提前拉取。
-
src不能是 base64（iOS Safari 解码长字符串易卡顿） -
loading="lazy"只能加在占位图上，否则data-src可能被预加载 - 别用
srcset或sizes干扰初始请求路径，它们和 blur-up 逻辑冲突
onload 移除模糊类是最轻量可靠的 JS 控制方式
不用监听 DOM、不用框架生命周期，原生 onload 事件足够稳定且兼容性好。Tailwind 的过渡动画依赖 class 切换，不是靠属性或状态驱动。
- 初始写法：
<img src="thumb.jpg" class="blur-md transition-all duration-500" onload="this.classList.remove('blur-md')"> - 加上
onerror="this.classList.add('opacity-70')"防止高清图加载失败后完全不可见 - React/Vue 中不要在
useEffect或mounted里手动绑定load事件——原生onload更早触发、更少竞态
blur-up 必须配合显式宽高约束，否则页面会抖动
Tailwind 没有内置的「占位宽高」工具类，而图片加载前后尺寸变化会引发 layout shift，尤其在懒加载场景下更明显。
- 给
<img>设固定width和height属性（不是 CSS），让浏览器预留空间 - 或用
aspect-w-16 aspect-h-9类 +object-fit: cover组合控制比例（需确保父容器有宽） - 避免只靠
max-w-full h-auto——模糊占位时高度为 0，加载后突然撑开
blur-md 性能敏感，移动端慎用超过 blur-lg
滤镜值越大，GPU 渲染压力越高。blur-xl 在 iOS Safari 滚动中会出现肉眼可见卡顿，安卓 WebView 对 >12px 的支持也不统一。
- 桌面端可试
blur-lg（12px），但务必真机测试滚动帧率 - 移动端优先用
blur-md（8px），它在多数设备上平衡了效果与性能 - 别混用
backdrop-blur-md和blur-md：前者模糊背景，后者模糊元素自身，目的完全不同
最容易被忽略的是：blur-up 不是纯 CSS 技术，它本质是一次 JS 触发的 class 状态切换。没有 onload 或等效机制，blur- 类就只是静态样式，和渐进加载毫无关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
