实现图片模糊到清晰的平滑过渡需三者协同：LQIP占位图（200px宽、3–5%质量JPG）、IntersectionObserver提前加载高清图（rootMargin: "50px"）、CSS叠加过渡filter与opacity。
要实现图片从模糊到清晰的平滑过渡，核心不是靠单个 HTML 属性或一行 CSS，而是三者协同：一张小而糊的占位图（LQIP）、一套触发替换的逻辑、一组精准控制的 CSS 过渡规则。
用 LQIP 占位图打底
高清图加载前必须有视觉锚点。推荐生成一张 200px 宽、质量仅 3–5% 的 JPG 图（体积控制在 10–20KB），比如 photo-lqip.jpg。它本身已模糊，能快速解码并撑起容器结构。HTML 中直接让 src 指向这张图，而不是留空或写 placeholder 颜色——否则浏览器不会提前渲染，用户看到的就是空白。
用 IntersectionObserver 替换高清图
别监听 scroll，改用 IntersectionObserver 判断图片是否进入视口：
- 初始化时设
rootMargin: "50px"，让图片提前 50px 开始加载，避免滚动快时“跳入” - 回调中执行
img.src = img.dataset.src，然后立刻调用observer.unobserve(img)防止重复触发 - 高清图地址存在
data-src里，不要写进srcset或src，避免重复请求
CSS 同时控制 filter 和 opacity
只过渡 opacity 会暴露拉伸失真；只过渡 blur 会在替换瞬间闪帧。必须两者叠加：
img { filter: blur(6px); opacity: 1; transition: filter 0.4s ease, opacity 0.3s ease; }.loaded { filter: blur(0); opacity: 1; }- 确保
<img alt="图片渐进式加载怎么实现由模糊到清晰的平滑过渡" >是块级元素：display: block或inline-block - blur 值单位必须是
px，不能写blur(6)或blur(0.5rem)
容器尺寸必须稳定
图片替换前后宽高不一致会导致布局跳动，破坏过渡感：
- 写死
width和height，或用aspect-ratio: 4/3+object-fit: cover - 避免
width: 100%; height: auto，尤其在卡片流、瀑布流中极易出问题 - LQIP 图和高清图的原始宽高比尽量一致，否则即使有 aspect-ratio 也可能轻微拉伸
