blur-up技术核心是“先给轮廓、再补细节”的加载节奏：用小而糊的LQIP占位图快速呈现，再平滑过渡为高清图，优化感知速度而非真实下载时间。
在 H5 页面中用 blur-up 技术实现响应式图片模糊加载，核心不是“让图变模糊”，而是构建一套“先给轮廓、再补细节”的加载节奏——用户滑动到图片位置时，立刻看到一张小而糊的占位图，几毫秒后平滑过渡为高清图，视觉上感觉“加载飞快”。这不缩短真实下载时间，但大幅优化感知速度。
1. HTML 结构必须分离占位与高清资源
blur-up 不是纯 CSS 效果，它依赖 src 和 data-src 的职责分工：
- src 指向 LQIP（低质量占位图）：尺寸建议 ≤200px 宽、文件 ≤5KB，格式优先选 WebP 或高压缩 JPEG；不能是 base64（iOS Safari 解码易卡顿）
-
data-src 存高清图地址：支持响应式路径，比如
或data-srcset="photo-480.jpg 480w, photo-960.jpg 960w, photo-1920.jpg 1920w" - 禁用 loading="lazy" 在高清图上：只对占位图启用 lazy，否则 data-src 可能被浏览器预加载，破坏 blur-up 时机
2. CSS 过渡要精准、防抖、兼容 Safari
模糊渐变靠浏览器合成器驱动，不是 JS 动画。关键细节决定成败：
-
容器必须有固定宽高或 aspect-ratio：例如
style="aspect-ratio: 16/9; width: 100%;"，避免 LQIP 和高清图尺寸差异引发布局抖动 -
滤镜过渡必须拆开写：用
transition: filter 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease，不要简写为all或只写filter -
初始状态设 blur(6px) + opacity: 1；完成类里只改
filter: blur(0)，不改 opacity，防止 Safari 下 transition 失效 -
iOS Safari 兼容要点：父容器不能含
transform: translateZ(0)或will-change: transform，否则滤镜降级为静态快照
3. JS 控制时机：用 IntersectionObserver 替代 onload
直接监听 img.onload 会出错——LQIP 加载完就触发，但高清图可能还在 DNS 查询阶段。正确做法是：
-
等图片进入视口才换高清图：用
IntersectionObserver，配置rootMargin: "50px"，提前加载防滑动过快白屏 -
进视口瞬间执行三件事：①
img.src = img.dataset.src；②img.classList.add("loaded")；③observer.unobserve(img) - 不等高清图 onload 再加 class：替换 src 后浏览器自动重绘，CSS 过渡自然开始；加 class 是为了触发动画，不是等待加载完成
4. 补充体验：失败兜底与性能保护
网络异常或图片 404 时，不能让页面留白或突然消失：
-
加载失败显示主色调色块：服务端可提取 LQIP 主色生成背景，前端用
onerror="this.style.background='#e0d8c9'" - 关键图降级为 SVG 占位：如头像、商品主图，内置本地 SVG，彻底规避网络失败
- 移动端慎用高 blur 值：blur-md（8px）在多数设备平衡效果与性能；blur-xl 在 iOS Safari 滚动中易卡顿，真机测试必做
