<picture>标签不支持无缝加载，仅做声明式资源选择；需配合JS监听加载状态和CSS过渡动画才能实现无缝效果，单页应用中推荐使用框架内置图片组件。
为什么 <picture> 无法实现“无缝”效果
浏览器对 <picture> 的处理是声明式、一次性、无状态的：匹配到第一个 <source> 就发起请求，加载完成即替换 <img> 内容，中间没有钩子、无加载中占位、无淡入/缩放过渡。你看到的“闪一下”，正是新图加载完成瞬间直接替换旧图的结果。
常见误解是加了 loading="lazy" 或用 sizes 就能“平滑”，其实它们只影响加载时机和尺寸计算，不改变替换行为。
<picture> 必须配合 JS 才能模拟“无缝”
真正的“无缝”需要三件事协同：<picture> 提供正确资源 + JS 监听加载状态 + CSS 控制视觉过渡。典型做法是：
- 用两个
<picture>容器（一个 visible，一个 hidden），预加载目标图后切换 opacity 和 z-index - 监听
img.naturalWidth或load事件，确认新图就绪再触发 CSS 动画 - 给
<img>加transition: opacity .3s ease，并在 JS 中先设opacity: 0，加载完再设opacity: 1 - 避免在
<source>中混用w和x描述符——否则浏览器可能选错图，导致预加载失败
容易被忽略的兼容性陷阱
很多“无缝”方案在 Safari 或旧版 Chrome 上失效，核心原因不是 JS 写错，而是 <picture> 配置非法导致预加载根本没发生：
立即学习“前端免费学习笔记（深入）”；
-
media值缺括号：写成media="max-width: 768px"❌，必须是media="(max-width: 768px)"✅ -
type值大小写敏感：服务器返回image/webp，但写成type="image/WebP"❌，会跳过该<source> - 漏掉
<img>的src：即使你用 JS 控制显示，DOM 中的<img src="">仍会触发空请求或 fallback 失败 - 没设
width/height属性：容器高度塌陷，JS 计算位置偏移，过渡错位
单页应用中更推荐的替代路径
如果你用的是 React/Vue，别手写 <picture> + JS 切换逻辑。现代方案更稳：
- React：用
next/image（Next.js）或@remotion/img，内置 blur-up、priority、onLoadingComplete - Vue：用
v-lazy-image或vue-picture，封装了IntersectionObserver+decode()等优化 - 纯 HTML 场景：老老实实用
<img srcset="" sizes="">+loading="lazy"，再配 CSSaspect-ratio和object-fit，比硬套<picture>更可控
真正难的从来不是怎么写 <picture>，而是判断什么时候不该用它——比如构图不需要变化、只换分辨率、不涉及格式降级时，<img> + srcset 就已足够。
