Promise 封装图片加载可实现链式调用与统一错误处理：单图用 loadImage，多图并行用 Promise.all，大量图片用并发控制的 loadImagesWithConcurrency，还可扩展超时与重试机制。

用 Promise 实现图片的异步加载与预加载，核心是把 img.onload 和 img.onerror 封装成可链式调用、可统一错误处理的 Promise。这样既能避免回调地狱，又便于组合多个图片资源、控制加载顺序或并发数。

基础：单张图片的 Promise 封装

创建一个返回 Promise 的函数，成功时 resolve 图片元素，失败时 reject 错误信息：

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
    img.src = src;
  });
}

使用示例：

loadImage('logo.png')
  .then(img => {
    document.body.appendChild(img);
  })
  .catch(err => console.error(err.message));

预加载多张图片（并行）

用 Promise.all 同时发起多个请求，全部成功才继续；任一失败则整体 rejected：

立即学习“Java免费学习笔记（深入）”；

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

• 适合页面初始化时提前拉取关键资源（如轮播图、图标集）
• 注意：浏览器对同一域名并发请求数有限制（通常 6~8 个），大量图片会自动排队

const imageUrls = ['a.jpg', 'b.jpg', 'c.jpg'];

Promise.all(imageUrls.map(loadImage))
  .then(images => {
    console.log('All images loaded:', images);
    // images 是包含 Image 实例的数组，可批量插入或缓存
  })
  .catch(err => console.error('At least one failed:', err));

可控并发的批量预加载（防阻塞）

当图片数量较多时，Promise.all 可能触发过多并发请求。可用“Promise 池”限制同时加载数量：

function loadImagesWithConcurrency(urls, concurrency = 3) {
  const results = [];
  let currentIndex = 0;

  function loadNext() {
    if (currentIndex >= urls.length) return Promise.resolve();
    const url = urls[currentIndex++];
    return loadImage(url).then(img => {
      results.push(img);
      return loadNext();
    });
  }

  return Promise.all(Array.from({ length: concurrency }, loadNext)).then(() => results);
}

调用：

loadImagesWithConcurrency(['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'], 2)
  .then(images => console.log(`Loaded ${images.length} images`));

带超时和重试机制的健壮加载

网络不稳定时，可增加超时控制和有限重试：

function loadImageWithRetry(src, { timeout = 5000, maxRetries = 2 } = {}) {
  return new Promise((resolve, reject) => {
    let attempts = 0;

    function tryLoad() {
      attempts++;
      const img = new Image();
      const timer = setTimeout(() => reject(new Error(`Timeout after ${timeout}ms for ${src}`)), timeout);

      img.onload = () => {
        clearTimeout(timer);
        resolve(img);
      };
      img.onerror = () => {
        clearTimeout(timer);
        if (attempts <= maxRetries) {
          setTimeout(tryLoad, 500); // 简单退避
        } else {
          reject(new Error(`Failed to load ${src} after ${maxRetries} retries`));
        }
      };
      img.src = src;
    }

    tryLoad();
  });
}

这些封装让图片加载逻辑更清晰、可复用、易测试，也方便后续集成进资源管理器或懒加载系统。