JavaScript使用Promise按顺序加载图片的异常问题及优化咨询

问题诱因 #

偶现null的核心原因是 Event对象的currentTarget属性生命周期限制：

• 你通过img.onload = resolve直接把事件对象作为Promise的成功值返回，但currentTarget仅在事件回调执行的同步周期内有效，事件回调执行结束后就会被浏览器重置为null。
• 你用map一次性启动了所有图片的并发加载，体积小的图片会先加载完成触发onload，resolve对应的Promise，但这时候你可能还在for await循环里等待前面顺序的Promise完成，等轮到取后面提前resolve的Promise结果时，对应事件的currentTarget早就被清空为null，自然就会往DOM里插入null。

更优实现方案 #

方案1：修复现有Promise流程（保留并发加载+顺序插入逻辑） #

直接在Promise内部把img实例作为resolve值传递，不要依赖事件对象的currentTarget，从根源规避属性失效的问题：

async function loadImagesInOrder(imgUrls, rootEl) {
  const promises = imgUrls.map(
    (url) =>
      new Promise((resolve, reject) => {
        const image = document.createElement("img");
        image.onload = () => resolve(image); // 直接返回img实例
        image.onerror = () => {
          // 可自定义错误降级，避免单张加载失败阻塞整个流程
          image.alt = "图片加载失败";
          resolve(image);
          // 如果需要严格中断流程可改为 reject(new Error(`加载${url}失败`))
        };
        image.src = url;
      })
  );

  for (const p of promises) {
    const img = await p;
    rootEl.append(img);
  }
}

该方案优势为图片并发加载，且严格按照数组顺序插入，加载完一张显示一张，无需等待所有资源加载完成。

方案2：DOM预占位方案（实现更简单、性能更优） #

不需要复杂的异步流程控制，先按顺序把所有img元素插入DOM占位，再设置src启动加载，DOM顺序天然保证显示顺序，完全不受加载先后影响：

function loadImagesInOrder(imgUrls, rootEl) {
  imgUrls.forEach(url => {
    const image = document.createElement("img");
    // 可自定义加载中占位样式
    image.style.opacity = '0';
    image.onload = () => {
      image.style.opacity = '1'; // 加载完成后再显示，避免半加载错位
    };
    image.onerror = () => {
      image.alt = "图片加载失败";
      image.style.opacity = '1';
    };
    rootEl.append(image); // 先按顺序插入DOM占位
    image.src = url; // 最后启动资源加载
  })
}

该方案实现逻辑极简，渲染顺序100%和数组一致，所有图片同时并发加载，整体加载速度更快，适合绝大多数业务场景。

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