<picture>元素本身不支持JS动态切换srcset，其响应式选择逻辑由浏览器在解析或重排时自主触发；JS只能安全操作其内部<img>元素的src、srcset和sizes属性，且必须确保<img>的src提供广泛兼容的fallback图片。
picture 元素本身不支持 JS 动态切换 srcset
<picture> 是个声明式响应式图片容器，它的作用是在 HTML 解析阶段根据 media、type 等属性，由浏览器**自主选择**最合适的 <source> 或兜底的 <img>。它不是“JS 可控组件”——你不能用 pictureEl.src = 'x.jpg' 或 pictureEl.setAttribute('srcset', ...) 来动态干预选择逻辑。
常见错误现象：直接对 <picture> 调用 setAttribute('src', ...) 无效；尝试修改 <source> 的 srcset 后浏览器不重新评估；手动切换 <img> 的 src 但丢失了 <source> 提供的响应式能力。
- 浏览器只在初始渲染或窗口 resize 时触发
<picture>的源选择流程 -
<source>标签是只读配置，JS 修改其属性不会触发重选 - 真正可被 JS 安全操作的，只有内部那个
<img>元素的src和srcset
想用 JS 控制响应式图片，得操作内部的 <img> 元素
如果你需要 JS 触发图片切换（比如轮播、用户点击缩略图、加载状态变更），正确做法是：保留 <picture> 结构用于响应式声明，但把 JS 逻辑全部绑定到它内部的 <img> 上。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<picture id="hero-picture"> <source media="(min-width: 768px)" srcset="hero-large.webp" type="image/webp"> <source media="(min-width: 768px)" srcset="hero-large.jpg" type="image/jpeg"> <source srcset="hero-small.webp" type="image/webp"> <img id="hero-img" src="hero-small.jpg" alt="Hero image"> </picture>
JS 操作方式：
- 用
document.getElementById('hero-img')获取那个<img>元素 - 直接改它的
src（如imgEl.src = 'new-hero.jpg'）——这会立即生效，且浏览器仍会按当前视口匹配其父<picture>中的<source>规则（前提是新src值也适配） - 如果要换整套响应式资源，可同时更新
imgEl.srcset和imgEl.sizes，但注意：这仅影响该<img>自身，不改变<source>标签
轮播场景下，picture + JS 的典型陷阱
很多人试图给每个轮播项都写一个完整 <picture>，然后 JS 切换整个 DOM 节点。这会导致：
- DOM 频繁增删，性能差，尤其是移动端
- 每次切换都丢掉上一张图的解码缓存，出现闪烁或延迟
- 辅助技术（如屏幕阅读器）可能错过中间状态
更优解是：只保留一个 <picture> 容器，JS 只替换内部 <img> 的 src 和 srcset，并确保所有轮播图都提供多尺寸版本。例如：
const img = document.getElementById('hero-img');
const slides = [
{ src: 'slide1-small.jpg', srcset: 'slide1-small.jpg 480w, slide1-medium.jpg 768w, slide1-large.jpg 1200w', sizes: '(max-width: 480px) 100vw, (max-width: 768px) 50vw, 1200px' },
{ src: 'slide2-small.jpg', srcset: 'slide2-small.jpg 480w, slide2-medium.jpg 768w, slide2-large.jpg 1200w', sizes: '...' }
];
// 切换时：
img.src = slides[current].src;
img.srcset = slides[current].srcset;
img.sizes = slides[current].sizes;
关键点：你必须为每张图都准备一套完整的 srcset + sizes，否则 JS 切换后就退化成固定尺寸图。
兼容性与 fallback 必须靠 img.src 保底
<picture> 的 <source> 支持度虽高（Chrome/Firefox/Safari/Edge 全支持），但旧版 IE 完全不识别。所以无论 JS 怎么操作，<img> 的 src 属性永远是你最后的 fallback —— 它必须指向一张能直接显示的图，且格式应为广泛支持的 .jpg 或 .png。
容易被忽略的地方：
- 不要让
<img>的src为空或占位符（如data:image/gif;base64,...），否则在 JS 加载失败或阻塞时，用户看到空白 - 如果用 WebP，
<source type="image/webp">是可选优化，但<img src="fallback.jpg">是强制存在的底线 - JS 切换前，建议先用
img.complete或img.naturalWidth判断是否已加载成功，避免闪白
