直接加blur-md不会触发渐进式加载，因为该类仅设置filter: blur(4px)，不感知图片加载状态；必须配合极小占位图、高清图data-src及onload事件移除模糊类三要素闭环，缺一不可。
为什么直接加 blur-md 不会触发渐进式加载
因为 blur-md 只是纯 CSS 滤镜，它不感知图片是否加载完成。浏览器看到 src 就立刻发起请求，如果这个 src 是高清图，那「模糊→清晰」的过渡根本不会发生——它从一开始就是高清、无模糊、无过渡。
真正起作用的是三要素组合：极小占位图（src） + 高清图地址（data-src） + onload 事件移除模糊类。缺一不可。
-
src必须指向 ≤2 KB 的缩略图（如 20×15 JPEG），不能是 base64（iOS Safari 解码长字符串易卡顿） -
data-src存高清图地址，确保它不会被浏览器提前拉取 - 别在
srcset或sizes里混用——它们会干扰初始请求路径，和 blur-up 逻辑冲突
如何防止懒加载时页面抖动（CLS）
图片加载前后尺寸变化是布局抖动（CLS）的主因。Tailwind 没有内置「占位宽高」工具类，必须靠 HTML 属性或 aspect-ratio 类显式约束空间。
- 最稳妥：给
<img alt="Tailwind CSS中如何处理图片懒加载占位样式" >写原生width和height属性（不是 CSS），让浏览器按 intrinsic size 预留空间 - 响应式场景：用
aspect-w-16 aspect-h-9+object-fit: cover，但要确保父容器有明确宽度（否则比例失效） - 绝对别只写
max-w-full h-auto——模糊占位时高度为 0，加载后突然撑开，抖动肉眼可见
移动端慎用高值 blur 滤镜的原因
blur-md 在中低端 Android 或 iOS 设备上已可能引发轻微掉帧；blur-lg 及以上会显著增加 GPU 渲染压力，尤其在滚动中叠加 transition 动画时。
立即学习“前端免费学习笔记（深入）”；
实测发现：在 iPhone SE（2020）上，blur-lg + transition-all duration-500 导致 onload 后 class 移除延迟约 120ms，用户能感知「卡一下」。
- 推荐保守值：
blur-sm（2px）或blur-md（4px），兼顾视觉效果与性能 - 不用监听
IntersectionObserver或框架生命周期（如 VueonMounted）去绑定 load 事件——原生onload触发最早、最稳定 - 加
onerror="this.classList.add('opacity-70')"，避免高清图 404 后完全不可见
Vue/React 中常见误操作
在框架中手动用 useEffect 或 mounted 去监听图片 load，反而引入竞态：DOM 已挂载，但图片可能早已加载完毕，onload 被跳过。
正确做法仍是原生属性驱动：
<img
src="thumb.jpg"
class="blur-md transition-all duration-500 object-cover"
onload="this.classList.remove('blur-md'); this.src = this.dataset.src"
onerror="this.classList.add('opacity-70')"
width="320"
height="180"
/>
注意：这里 this.src = this.dataset.src 是关键——它把高清图真正赋给 src，后续浏览器缓存、SEO 抓取都认这个地址。仅靠 CSS 切换 class 是无效的。
复杂点在于：你得确保所有图片都走同一套 DOM 层级约束 + 尺寸声明 + 事件绑定逻辑，而不是依赖某一个组件封装来「兜底」——一旦漏掉一个 width 属性，抖动就回来了。
