srcset + loading="lazy" 无法实现模糊→清晰渐显，因其仅控制资源选择与请求时机，不提供占位图、不管理视觉状态、不触发css动画，导致空白硬切或拉伸模糊后突变；真正需lqip占位+intersectionobserver监听+opacity/filter双过渡+固定容器尺寸。
直接用 loading="lazy" 或单纯靠 srcset 无法实现“模糊→清晰”的渐显效果；必须组合 LQIP（低质量占位图）+ IntersectionObserver + opacity 和 filter 双过渡，且容器尺寸必须可控，否则布局抖动会毁掉整个动画。
为什么 srcset + loading="lazy" 不能替代渐显效果
srcset 只告诉浏览器“该加载哪张图”，loading="lazy" 只控制“什么时候发请求”，二者都不生成占位、不管理视觉状态、不触发 CSS 动画。你看到的仍是“空白→硬切”或“拉伸模糊图→突然高清”，尤其在慢网下体验断裂。真正需要的是：一张小图先撑开空间并模糊显示，另一张大图异步加载完成后平滑覆盖。
如何用 picture + data-src + IntersectionObserver 实现响应式渐显
核心是把资源选择权交给浏览器（<picture></picture>），把加载时机交给观察器（IntersectionObserver），把视觉过渡交给 CSS（opacity + filter）：
-
<source></source>中放响应式高清图（带srcset和media），fallback 的<img>的src指向 LQIP 图（如photo-lqip.jpg），同时用data-src存真实高清图地址（非srcset值，避免提前解析） - JS 中创建
IntersectionObserver，rootMargin: "100px"提前加载，回调里执行：img.src = img.dataset.src，然后加class="loaded" - CSS 中写：
img { opacity: 1; filter: blur(6px); transition: opacity 0.3s ease, filter 0.4s ease; }，img.loaded { opacity: 1; filter: blur(0); }—— 注意初始不能设opacity: 0，否则<picture></picture>fallback 会不可见 - 必须为容器设固定宽高比（如
aspect-ratio: 16/9或padding-top: 56.25%），否则 LQIP 和高清图渲染尺寸不一致，导致缩放跳变
移动端 hover 模糊失效？别用 :hover 做渐显
在 iOS Safari 和多数安卓 WebView 中，img:hover 不可靠：首次无点击不触发、区域错位、filter 卡顿甚至糊成一片。渐显效果必须依赖加载完成事件，而非用户交互。如果非要“手动触发”，请用按钮控制：
- 按钮点击后执行
img.style.filter = `blur(${value}px)`，单位必须是px（blur(4)无效） - 避免用
classList.toggle()切换预设 class，因为模糊值需动态连续变化；改用对象维护各 filter 分量，再拼接完整字符串 - 父容器若设了
overflow: hidden，会裁掉blur溢出像素，看起来像没生效——要么加负 margin，要么改 overflow - 值超过
10px在低端 iOS 设备上会降级为均值模糊，建议上限设为8px并用@media (-webkit-min-device-pixel-ratio: 2)微调
容易被忽略的细节：LQIP 图不是滤镜，是真实缩略图
用 filter: blur(10px) 对原图实时加模糊，等于白做：首屏仍要解码整张高清图，失去“先看轮廓”的意义。LQIP 必须是独立生成的、极小尺寸（如 200×150）、高压缩（JPEG 质量 5–10%）的 base64 或独立图片文件。它要能：秒出、撑满容器、颜色倾向与原图一致。工具推荐使用 sharp 脚本批量生成，或用 Cloudinary 的 q_10 + w_200 参数直出。另外，高清图加载中，LQIP 必须保持可见 —— 别在 JS 里 img.style.display = 'none'，那会导致 layout shift。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
