5

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?

Joji
  • 4,703
  • 7
  • 41
  • 86
  • `Note: The value of event.currentTarget is only available while the event is being handled` – Keith Oct 24 '21 at 01:54
  • so I guess the problem is that sometimes the event is not handled? why is that? – Joji Oct 24 '21 at 01:58
  • Have a look at [this](https://stackoverflow.com/questions/46889290/waiting-for-more-than-one-concurrent-await-operation) and [that](https://stackoverflow.com/questions/45285129/any-difference-between-await-promise-all-and-multiple-await) for why you should not `await` promises in a loop that you constructed before it. – Bergi Oct 24 '21 at 03:32

1 Answers1

4

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">
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • Thanks for the reply. I wonder what the differences between the `root.appendChild(document.createElement('img')).src = src;` approach vs. my original approach? I think the difference is that, my approach only shows the images once they are fully loaded while your approach lets the browser show the image right after it kicks out the Get request so there might be some intermediate stage of loading - the image could visually load in chunks. – Joji Oct 24 '21 at 01:52
  • Yep, if you wanted to only show them once they're fully loaded, I'd recommend changing the style from display:none after the load event fires. If you want to display them all at once when all images are loaded, hide the container, and after a `Promise.all` on the `load` events, show the container. – CertainPerformance Oct 24 '21 at 01:55
  • yea I was thinking before the image fully loads we show some sort of placeholder by giving it a background image style and once it fully loads we swap them by removing that style... btw didn't `appendChild` would return the child being appended, good to know! – Joji Oct 24 '21 at 02:01
  • Hi could you expound on this a little bit more "The .currentTarget will not exist if the Promise resolves after image has already loaded "? I am not sure if I understand it... – Joji Oct 24 '21 at 16:42