求助：JavaScript遍历目录图片时如何实现无图即终止循环

嗨，这个问题我之前也踩过坑！核心原因是同步循环和异步事件的执行顺序不匹配：你的for循环是同步运行的，会一口气把1到10的图片请求全发出去，而onerror是异步触发的——当第5张图片加载失败时，循环早就跑完了，这时候修改j的值根本没法阻止已经在执行的循环，所以后面的图片还是会被请求，出现一堆404。

下面给你两种实用的解决方案，都能实现“加载失败就立即终止”的需求：

方案一：递归函数（传统写法，兼容性好） #

递归可以让我们等上一张图片的加载结果出来后，再决定要不要请求下一张，完美避开同步异步的冲突：

function loadNextImage(num) {
  const img = new Image();
  const imgSrc = '/assets/images/work/gal-img-' + num + '.jpg';

  // 图片加载成功的逻辑
  img.onload = function() {
    // 这里把图片添加到页面，比如插入到body或者指定容器里
    document.body.appendChild(img);
    // 继续加载下一张
    loadNextImage(num + 1);
  };

  // 图片加载失败的逻辑
  img.onerror = function() {
    console.log(`加载第${num}张图片失败，终止加载流程`);
    // 不继续递归，就相当于终止了"循环"
  };

  img.src = imgSrc;
}

// 从第1张开始启动加载
loadNextImage(1);

方案二：Async/Await（现代写法，代码更清晰） #

把图片加载包装成Promise，然后用async函数配合await实现顺序加载，失败就直接break终止循环：

// 把图片加载包装成Promise
function loadImage(num) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    const imgSrc = '/assets/images/work/gal-img-' + num + '.jpg';

    img.onload = () => resolve(img);
    img.onerror = () => reject(`第${num}张图片不存在`);

    img.src = imgSrc;
  });
}

// 顺序加载图片的异步函数
async function loadImagesInOrder() {
  let currentNum = 1;
  while (true) {
    try {
      const img = await loadImage(currentNum);
      // 加载成功，插入到页面
      document.body.appendChild(img);
      currentNum++;
    } catch (err) {
      console.log(err + "，停止加载后续图片");
      break; // 终止循环
    }
  }
}

// 启动加载
loadImagesInOrder();

这两种方案都是逐个加载图片，每一张的加载结果（成功/失败）出来后，才会处理下一张，这样当某一张加载失败时，就能立刻停止后续的请求，不会再出现多余的404错误。

另外提醒一下：如果你的需求是把图片展示到浏览器，别忘了在加载成功的回调里把图片元素添加到DOM中哦，不然图片只是被浏览器加载了，不会显示在页面上~

内容的提问来源于stack exchange，提问作者naram kiran