如何在循环中使用image onload并按序加载图片、遇不存在图片终止循环？

我完全懂你遇到的这两个麻烦——用new Image()搭配onload后，不仅控制台里的加载日志顺序乱得一塌糊涂，碰到不存在的图片时还没法立刻终止循环，只能先把所有图片都加载了再隐藏失败的。咱们来一步步搞定这两个问题：

问题根源分析 #

1. 加载顺序混乱：图片加载是异步操作，你的原for循环是同步执行的，会一次性把所有图片的请求发出去。哪个图片先下载完成，就会先触发onload，所以日志顺序和你预期的循环顺序完全不一致。
2. 无法终止循环：循环是同步跑完的，不管异步的onerror什么时候触发，循环已经把8次迭代都执行完了，所以你只能事后隐藏失败的图片，没法提前终止。

解决方案：异步串行加载 #

我们可以用Promise封装图片加载逻辑，再配合async/await让循环变成串行执行——也就是等前一张图片完全加载完成（或确认失败）后，再处理下一张。这样既能保证顺序，又能在失败时立刻终止循环。

完整代码示例

// 封装单张图片的加载为Promise
function loadImage(picPath, picName) {
  return new Promise((resolve, reject) => {
    const newImage = new Image();
    newImage.src = picPath;
    newImage.alt = picName;

    newImage.onload = () => {
      console.log(`Found: ${picPath}`);
      resolve(newImage); // 加载成功，返回图片实例
    };

    newImage.onerror = () => {
      console.log(`Not Found: ${picPath}`);
      reject(); // 加载失败，触发reject
    };
  });
}

// 串行加载图片的主函数
async function loadImagesSequentially() {
  const file_name = window.location.href.split('/').pop();
  const country = file_name.split(/\./)[0];
  const parent_img = document.getElementsByClassName("pic")[0];

  for (let i = 0; i < 8; i++) {
    const pic_num = ("000" + (i + 1)).slice(-3);
    const pic_name = `${country}_${pic_num}.jpg`;
    const pic_path = `../images/${country}/${pic_name}`;

    try {
      // 等待当前图片加载完成
      const img = await loadImage(pic_path, pic_name);
      // 加载成功才添加到DOM
      parent_img.appendChild(img);
    } catch {
      // 加载失败，直接终止循环
      console.log("遇到不存在的图片，终止后续加载");
      break;
    }
  }
}

// 启动加载
loadImagesSequentially();

代码说明 #

• 串行加载保证顺序：await会让循环暂停，直到当前图片的加载Promise状态改变（成功或失败），所以日志顺序和你预期的循环顺序完全一致，图片也会按顺序添加到DOM中。
• 失败即终止循环：一旦某个图片加载失败进入catch块，我们用break直接终止for循环，不会再发起后续图片的请求，从根源上避免了无效加载。
• 解决闭包问题：原代码中用var i会导致onload/onerror里的pic_path都是最后一张图片的路径（闭包陷阱），改用let i或者这里的async/await写法，自然避免了这个问题。

内容的提问来源于stack exchange，提问作者Tsubasa Yamaguchi