JavaScript: weird bug when using Promises to load images in order

Question

I have an array of image urls and I want to display these images on the webpage in the order of the placement of their corresponding URL in the array.

for example, we have

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

in which case we want to display 400/400 first, then 200/200 and lastly 300/300.

If we implement it naively then the order is not guaranteed.

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

So I use Promises to manage the async flow control

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);
  }
}

It works, but not all of the time. With this implementation, Sometimes some images are going to be null so you end up with null on the webpage.

This is the live demo https://codesandbox.io/s/load-images-in-order-t16hs?file=/src/index.js

Can someone point out what the problem is? Also is there any better way to make sure the image appear on the page in the order of the URL in the array?

Answer 1

It looks like the .currentTarget of the event is sometimes null for some reason. An easy fix is to resolve the Promise with the image itself, instead of going through the problematic load handler. Keith found why in the comments:

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

But when you do

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

All of the images have their loading process initiated immediately, but they load asynchronously, and they often don't load in order. The .currentTarget will not exist if the Promise resolves after image has already loaded - for example, if image 1, then image 3 loads, then image 2 loads, image 3 will have already been loaded by the time the third image's

const { currentTarget } = await p;

runs.

If you simply need to order the images properly in the end, an easier approach would be to append them immediately.

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">