用 Promise 封装多图并发加载需三步：1. 用 Map 缓存 URL→Promise<IMG>映射，复用加载中/成功状态；2. 分批控制并发数防雪崩，每批内 Promise.all 并行；3. 单图加载统一处理 onload/onerror、跨域设置与失败清理缓存，最终用 Promise.allSettled 保证顺序返回。
用 Promise 封装多张图片的并发加载与缓存，核心是结合 Promise.all 控制并发、用 Map 或 WeakMap 缓存已加载的图片对象，并避免重复请求。关键不在“一次性全发”，而在“控制并发数 + 复用缓存 + 统一错误处理”。
1. 建立图片缓存池（内存级）
缓存应基于图片 URL 唯一标识，避免重复创建 Image 实例。推荐用 Map 存储 URL → Promise 映射，这样既能复用正在加载中的 Promise，又能复用已成功的图片实例：
- 每次加载前先查缓存：若命中，直接返回缓存的 Promise；若未命中，创建新 Promise 并存入缓存
- 缓存值不是图片 DOM 元素本身，而是
Promise<HTMLImageElement>，保证调用方拿到的是“就绪后的图片” - 不建议用
WeakMap（URL 是字符串，WeakMap 键必须是对象），直接用Map即可
2. 控制并发数量（防雪崩）
直接 Promise.all(urls.map(loadImg)) 会一次性发起全部请求，可能触发浏览器并发限制（通常 6~10 个）或服务端限流。需手动实现“最多 N 个同时进行”的队列：
- 把所有图片 URL 列表切分成多个批次，每批最多 N 个
- 用
async/await串行执行批次，但每个批次内并行加载（Promise.all） - 更简洁的做法是用
Promise.allSettled+ 递归分片，或借助第三方库如p-limit
3. 封装单图加载逻辑（带缓存和错误重试）
每个图片加载应返回一个稳定、可复用的 Promise：
立即学习“Java免费学习笔记（深入）”；
- 创建
Image实例，监听load和error事件 - 成功时 resolve 图片元素；失败时 reject 错误，并从缓存中删除该 URL（防止下次仍返回失败 Promise）
- 可选加入简单重试（如 1 次），避免网络抖动导致失败
- 设置
img.crossOrigin = 'anonymous'（如需读取像素或 canvas 使用）
4. 组合并发加载与统一返回
最终接口应支持传入 URL 数组、最大并发数、是否启用缓存等参数，返回 Promise<HTMLImageElement[]>：
- 对每个 URL 调用缓存版加载函数，得到 Promise 数组
- 用并发控制函数（如
mapLimit）包装这批 Promise，限制同时 pending 数量 - 用
Promise.allSettled而非Promise.all，确保部分失败不影响整体，再过滤出成功结果 - 返回图片数组时，顺序与输入 URL 一致（靠索引对齐，不是按完成先后）
不复杂但容易忽略细节：缓存要管住“加载中”和“已失败”两种状态，并发控制不能只靠浏览器默认限制，错误要区分网络失败和跨域拒绝，图片 onload 事件需在设置 src 后绑定以防同步触发。
