如何等待onload语句执行完成？循环嵌套onload异常问题

你的问题核心在于同步的for循环和异步的onload事件不兼容：普通for循环会同步执行完所有迭代，根本不会等待每张图片的onload触发，而且因为闭包特性，所有onload回调里的index最终都会变成数组的长度值，自然达不到“加载完一张再加载下一张”的效果。

下面是两种可行的解决思路：

方法一：用Async/Await + Promise封装加载逻辑 #

把单张图片的加载逻辑封装成返回Promise的函数，然后在async函数里用循环逐个await，就能实现顺序加载：

// 封装图片加载为Promise
function loadImage(imgElement) {
  return new Promise((resolve, reject) => {
    // 如果图片已经加载完成（比如来自缓存），直接resolve
    if (imgElement.complete) {
      console.log('图片已缓存完成');
      resolve(imgElement);
      return;
    }
    // 绑定onload和onerror事件
    imgElement.onload = () => {
      console.log('图片加载完成');
      resolve(imgElement);
    };
    imgElement.onerror = (err) => {
      console.error('图片加载失败', err);
      reject(err);
    };
  });
}

// 用async函数执行顺序加载
async function loadImagesSequentially(lightboxImages) {
  for (let index = 0; index < lightboxImages.length; index++) {
    console.log('开始加载第' + index + '张图片');
    try {
      await loadImage(lightboxImages[index]);
      // 这里可以写当前图片加载完成后的逻辑
      console.log('第' + index + '张图片处理完成，进入下一张');
    } catch (err) {
      // 处理加载失败的情况，比如跳过或者重试
      console.log('第' + index + '张图片加载失败，跳过');
    }
  }
}

// 调用执行
loadImagesSequentially(lightboxImages);

方法二：用递归代替循环 #

如果不想用async/await（比如兼容旧环境），可以用递归的方式，每次加载完成后再调用下一次加载：

function loadImageSequentially(index, lightboxImages) {
  if (index >= lightboxImages.length) {
    console.log('所有图片加载完成');
    return;
  }
  console.log('开始加载第' + index + '张图片');
  const img = lightboxImages[index];
  
  if (img.complete) {
    console.log('第' + index + '张图片已缓存');
    // 直接处理下一张
    loadImageSequentially(index + 1, lightboxImages);
    return;
  }
  
  img.onload = () => {
    console.log('第' + index + '张图片加载完成');
    // 加载完成后递归调用下一张
    loadImageSequentially(index + 1, lightboxImages);
  };
  
  img.onerror = () => {
    console.log('第' + index + '张图片加载失败');
    // 失败也继续下一张
    loadImageSequentially(index + 1, lightboxImages);
  };
}

// 启动递归
loadImageSequentially(0, lightboxImages);

关键注意点 #

• 一定要处理img.complete的情况：如果图片已经被浏览器缓存，onload事件不会触发，直接判断这个属性可以避免无限等待。
• 用let index而不是var index：在普通for循环里，let会为每个迭代创建独立的作用域，避免闭包导致的index值异常（如果用var，所有onload回调里的index都会是最后一个值）。

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