picture标签本身不支持渐进式加载，它仅是资源选择器；实现模糊到清晰效果必须配合JS监听+CSS过渡+双图分阶段加载，不能依赖srcset或source自动切换。
picture 标签本身不支持渐进式加载
<picture> 是一个资源选择器，不是加载控制器。它只告诉浏览器“在什么条件下该用哪张图”，但不会自动先显示模糊图、再淡入高清图。所有 <source> 和 <img> 中的 src 或 srcset 都是直接发起网络请求的，没有占位、无过渡、无延迟——浏览器选中哪个就立刻加载并硬切，用户看到的是“闪现”，不是“渐进”。
必须配合 JS + CSS 才能实现模糊→清晰效果
真正落地的渐进式加载，靠的是 DOM 结构叠加 + 属性分离 + 事件驱动，<picture> 只负责提供高清图源，其他全得手动补上：
- 外层容器需固定宽高（或用
aspect-ratio），否则模糊图和高清图尺寸错位会引发 layout shift - 模糊占位图不能塞进
<source>，必须作为独立<img>放在<picture>外部，且src指向 base64 或极小尺寸 JPG（≤200 字节） - 高清图地址存在
data-src或data-srcset里，避免初始请求；等 IntersectionObserver 触发后再注入到<picture>内部的<img>的src属性 - CSS 必须设
transition: opacity 0.3s ease，且初始状态为opacity: 0，加载完成才加loaded类切到opacity: 1
常见错误：把 srcset 当成渐进式开关
写成这样是无效的：
<picture> <source srcset="thumb.jpg 1x, full.jpg 2x"> <img src="fallback.jpg"> </picture>
浏览器会根据 DPR 直接选 full.jpg 加载，thumb.jpg 完全不会被用作占位。渐进式依赖的是「两个独立图像资源分阶段加载」，不是「一个 srcset 里多档分辨率任选」。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- HTML 初始只渲染模糊图：
<img src="data:image/svg+xml,%3Csvg...> - JS 拿到
<picture>里的高清源（比如从<source type="image/webp">的srcset值里提取） - 创建新
Image()实例加载它，onload后替换模糊图的src并触发动画
Safari 和部分安卓 WebView 的兼容细节
即使结构写对，iOS 15.3 及更早版本 Safari 会在高清图 onload 后立即解码并渲染，跳过 CSS 过渡，导致“闪一下再淡入”。缓解方式有限但有效：
- 给渐进图容器加
will-change: opacity（但别滥用，内存开销明显） - 避免在
onload回调里直接改src，改用requestAnimationFrame包一层 - 高清图务必是渐进式 JPEG（不是 baseline）或 AVIF，服务端生成时要明确开启 progressive flag
- 不要依赖
loading="lazy"和<picture>联动做懒加载——IntersectionObserver 才是唯一可控入口
<picture> 就算完成了渐进逻辑。它只是资源仓库，不是播放器。模糊图、切换时机、动画控制、解码行为，全得自己拿 JS 拎出来串起来。 
