Promise.all加载多路径图片仅显示首张问题排查及修正方案

算力阿峰

2026-8-8

问题排查

原函数 promiseAllImg 在循环的第一次迭代中就直接 return 了第一个图片的 Promise，导致后续图片的加载逻辑完全没有执行，因此只会加载第一张图片。
主代码中 newArr.push(promiseAllImg(paths)) 实际上只添加了一个 Promise（也就是第一张图片的）到数组，Promise.all 自然也只会处理这一个。

修正后的代码

const paths = ['1.jpg', '2.jpg', '3.jpg'];

function promiseAllImg(arr) {
  // 收集所有图片加载的Promise
  const imagePromises = [];
  
  for (let path of arr) {
    const promise = new Promise((resolve, reject) => {
      const image = document.createElement('img');
      // 先绑定事件再设置src，避免图片缓存导致load事件不触发
      image.addEventListener('load', () => resolve(image));
      image.addEventListener('error', () => reject(`加载图片失败: ${path}`));
      image.src = path;
    });
    imagePromises.push(promise);
  }
  
  return imagePromises;
}

// 获取所有图片的Promise数组
const allImagePromises = promiseAllImg(paths);

// 等待所有图片加载完成后批量添加到body
Promise.all(allImagePromises)
  .then(loadedImages => {
    loadedImages.forEach(image => {
      document.body.appendChild(image);
    });
  })
  .catch(error => {
    console.error('图片加载出错:', error);
  });

关键改进点

收集所有Promise：promiseAllImg 不再提前返回，而是遍历所有图片路径，为每个图片创建Promise并收集到数组中，最后返回这个数组。
事件绑定顺序：先绑定 load 和 error 事件，再设置 src，避免因图片缓存导致事件无法触发的问题。
批量处理结果：Promise.all 接收所有Promise数组，等待全部加载完成后，通过 forEach 循环将所有图片添加到页面。
错误捕获：添加 catch 块处理图片加载失败的情况，便于调试。