最直接的图片切换方式是修改img的src属性，但需处理缓存、加载状态及闪烁问题；CSS background-image适合固定尺寸轮播；picture不支持运行时切换；懒加载推荐IntersectionObserver。
用 img + src 切换图片最直接，但要注意缓存和加载状态
直接改 <img> 的 src 属性是最轻量的切换方式，浏览器会自动触发新图片加载。但容易踩的坑是：旧图还没卸载完、新图又没加载好，导致空白或闪烁。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换前先设置
img.style.opacity = 0或img.hidden = true，等load事件触发后再显示 - 对关键图片预加载：用
new Image().src = "xxx.jpg"提前触发下载，避免点击后卡顿 - 服务端返回 304（Not Modified）时，浏览器可能复用缓存但不触发
load事件，需手动判断img.complete === true
用 CSS background-image 切换适合固定尺寸轮播
当多图尺寸统一、且需要过渡动画（如淡入淡出、滑动）时，background-image 比 <img> 更可控——它不会因图片加载失败而塌陷布局，也方便配合 transition。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把所有图片 URL 写进 CSS 类（如
.slide-1,.slide-2），JS 只负责切换 class 名，解耦逻辑与样式 - 使用
background-size: cover和background-position: center避免拉伸变形 - 注意 Safari 对
background-image动画支持较弱，复杂过渡建议用opacity+z-index叠层实现
picture 元素不适用于运行时多图切换
<picture> 是为响应式场景设计的：根据屏幕宽度、DPR、格式支持等，在页面加载时**静态选择一张图**。它没有 API 支持后续 JS 主动切换源，强行操作 source 或 img 子元素会破坏语义，且多数浏览器不重新解析。
常见误用现象：
- 写了一堆
<source media="(min-width:768px)" srcset="a.jpg">，然后想用 JS 改srcset实现“下一张”——无效 - 切换时只改了内部
<img>的src，但父级<picture>已锁定初始匹配结果，新src不被响应式逻辑识别
真要兼顾响应式 + 切换，得在 JS 层自己做 DPR/尺寸判断，再拼出对应 srcset 字符串赋给 img.srcset，绕过 <picture>。
用 IntersectionObserver 实现懒加载式多图切换
如果图集很长（比如商品详情页几十张缩略图），滚动到哪张才加载哪张，能显著减少首屏资源压力。这不是“切换”的传统理解，但实际体验中，用户感知的就是“滑到哪儿，哪儿出图”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每张图的
<img>初始设src为空，用data-src存真实地址 - 用
IntersectionObserver监听进入视口，回调里赋值img.src = img.dataset.src并移除监听（避免重复触发） - 加个简单 loading 占位：CSS 设置
background: #f0f0f0 url(loading.svg) center/24px no-repeat
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
很多方案看似能“切换”，其实混淆了加载时机、渲染控制和交互反馈三个层面。真正稳定的做法，是把“图在哪”（URL）、“图何时加载”（preload / lazy）、“图怎么呈现”（opacity / z-index / transform）拆开管理，而不是指望一个标签或一个属性全包。 
