标签本身不提供无缝过渡能力，它仅在加载阶段选择并请求一张最合适的图片，真正的过渡效果需通过css opacity动画与js控制双图叠层、加载时机及状态管理来实现。

标签本身不提供“无缝过渡”能力，它只负责在加载阶段选择一张最合适的图片资源——选完就加载，没有动画、没有淡入、不控制显示时机。所谓“无缝”，实际是 CSS + JS 配合实现的视觉效果， 仅确保你用对了源图。

为什么直接写 不会自动过渡

的工作发生在 DOM 解析和资源预加载阶段，浏览器一旦匹配到某个 或回退到 ，就会发起单次 HTTP 请求并替换当前 img 元素的 src（内部机制）。它不监听 resize、orientationchange，也不触发 transition，更不会等前一张图 fade out 再 show 新图。

常见误解是把 当成 JS 轮播器：其实它连“切换”这个动作都不执行，只是声明“这里可能有几张图，你按规则挑一张来用”。

真正实现过渡要靠 CSS opacity + JS 控制加载时机

过渡的关键不在 结构，而在如何让新图加载完成后再淡入、旧图淡出。核心思路是：用两个 元素叠层，一个 visible，一个 hidden；新图 onload 后触发动画，再移除旧图。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 必须用两个独立的 （不能共用同一个 ），否则无法同时存在两张图
• 第一张图用 加载，第二张图用另一个 （或 cloneNode）初始化但设 visibility: hidden
• 监听第二张图的 onload 事件，再给它加 opacity: 1 类，同时给第一张图加 opacity: 0
• CSS 中需定义 transition: opacity 0.3s ease，且两图 position: absolute 叠在一起

容易被忽略的加载陷阱

你以为新图 onload 就万事大吉？错。这些情况会让过渡卡顿或失败：

• srcset 里混用 w 和 x 描述符（如 "a.jpg 400w, b.jpg 2x"）→ 整个 srcset 被浏览器忽略，回退到 ，导致 onload 延迟或不触发
• 的 media 全部不匹配 → 浏览器静默 fallback 到 ，但若该 没设 onload 监听，你就收不到加载完成信号
• 未给 设 width/height 或 aspect-ratio → 图片加载时重排布局，破坏叠层定位
• 服务端返回错误 MIME 类型（如 WebP 文件返回 Content-Type: image/jpeg）→ Chrome 标记为 blocked:mime-type，不触发 onload

过渡逻辑必须自己补全， 只管选图

最常被跳过的一步：你得手动管理“哪张正在显示”“哪张正在加载”“加载失败怎么兜底”。 不维护状态，不抛事件，不重试。哪怕你写了十个 ，浏览器也只取中一个，其余全部丢弃——过渡动画所需的双图并存、渐变控制、错误降级，全得你自己用 JS 补齐。

别指望 picture、source 或 img 自带 ontransitionend 或 onswap 这类钩子，它们根本不存在。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！