picture 标签仅负责响应式资源选择与预加载提示，轮播逻辑、按需加载及内存管理必须由 javascript 实现：1. 每项用独立 picture 配置 media/srcset；2. js 控制仅激活当前项的 img.src；3. 提前预加载下一张高优资源；4. 切换时清空旧图 src 并销毁预加载实例。
Picture 标签本身不支持轮播逻辑，需配合 JavaScript 控制切换 + 按需加载策略实现。它负责响应式图片选择和资源预加载提示，真正的“按需加载”（如只加载当前页、懒加载下一页）要靠 JS 管理 srcset、sources 和 DOM 生命周期。
1. Picture 标签结构：为每张图准备响应式资源
每个轮播项用独立的 <picture></picture>，明确标注不同尺寸/设备下的图片源，浏览器会根据当前视口和 DPR 自动选最匹配的资源，避免下载过大图：
- 用
<source media="..." srcset="..."></source>定义断点规则（如小屏用 webp，大屏用高清 jpg） -
<img src="fallback.jpg" alt="...">作为兜底，必须带src（否则 picture 不触发加载） - 不要在
<picture></picture>上写loading="lazy"—— 它对内部<img>无效，且轮播中“懒加载”需由组件逻辑控制
2. 轮播 JS 控制：只激活当前项的 picture
初始状态只让第 1 项的 <picture></picture> 处于可渲染状态，其余项先不插入 DOM 或置空 src：
- 推荐做法：所有轮播项保留在 DOM 中，但非当前项的
<img>的src设为空字符串或 data-src，切换时再赋值 - 进阶做法：用 IntersectionObserver 监听可视区域，仅当 slide 进入近邻区域（如 ±1 个 slide）时才填充
<img src>和<source srcset></source> - 注意：切换动画期间避免同时触发多张图解码，可用
getBoundingClientRect()判断是否真正可见后再加载
3. 预加载下一张：提升滑动流畅度
用户大概率会滑到下一张，可在当前项显示时提前 fetch 下一张的 srcset 中最高优先级资源（如大屏下的 2x 图）：
- 调用
const img = new Image(); img.src = 'next-high-res.jpg';触发预加载（无需插入 DOM） - 预加载时机建议放在用户停止拖拽 / 自动轮播前 300ms，避免浪费带宽
- 如果下一张已缓存，
img.complete为 true，可立即切换；否则监听load事件再激活
4. 避免重复加载与内存泄漏
轮播反复切换时，旧图片资源可能滞留内存，尤其在 SPA 中：
- 切换前主动回收上一张的
<img>：设img.src = ''，并移除其所有srcset和src - 不用
display: none隐藏非活跃项——浏览器仍可能解码图片；改用visibility: hidden或完全移除src - 监听
pagehide或组件卸载，清理所有预加载的Image实例
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
