JavaScript:使用 Promises 按顺序加载图像时出现奇怪的错误

Question

我有一组图像 url，我想按照它们在数组中的相应 URL 的放置顺序在网页上显示这些图像。
例如，我们有

const imgUrls = [
  "https://picsum.photos/400/400",
  "https://picsum.photos/200/200",
  "https://picsum.photos/300/300"
];

在这种情况下，我们要显示 400/400首先，然后 200/200最后 300/300 .
如果我们天真地实现它，则无法保证顺序。

function loadImages(imgUrls, root) {
  imgUrls.forEach((url) => {
    const image = document.createElement("img");
    image.onload = () => {
      root.append(image);
    };
    image.src = url;
  });
}

所以我使用 Promises 来管理异步流控制

async function loadImagesInOrder(imgUrls, rootEl) {
  const promises = imgUrls.map(
    (url) =>
      new Promise((resolve, reject) => {
        const image = document.createElement("img");
        image.onload = resolve;
        image.onerror = reject;
        image.src = url;
      })
  );

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

它有效，但并非一直有效。使用此实现，有时某些图像将成为 null所以你最终得到 null在网页上。
这是现场演示
https://codesandbox.io/s/load-images-in-order-t16hs?file=/src/index.js
有人可以指出问题所在吗？还有 有没有更好的方法来确保图像以数组中 URL 的顺序出现在页面上？

Answer 1

它看起来像 .currentTarget有时是 null由于某些原因。一个简单的解决方法是用图像本身解决 Promise，而不是通过有问题的 load处理程序。基思在评论中找到了原因:

Note: The value of event.currentTarget is only available while the event is being handled

但是当你这样做时

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

所有图像的加载过程都会立即启动，但它们是异步加载的，并且通常不会按顺序加载。 .currentTarget如果 Promise 在图像已经加载后解析，则将不存在 - 例如，如果图像 1，然后图像 3 加载，然后图像 2 加载，图像 3 将在第三个图像的时间已经加载

const { currentTarget } = await p;

运行。
如果您最终只需要正确排序图像，更简单的方法是立即附加它们。

const root = document.querySelector("#app");

const imgUrls = [
  "https://picsum.photos/400/400",
  "https://picsum.photos/200/200",
  "https://picsum.photos/300/300"
];

for (const src of imgUrls) {
  root.appendChild(document.createElement('img')).src = src;
}

<div id="app">