Waiting for image to load in JavaScript

Question

I'm making an Ajax call which returns me some info including an image path.

I prepare all this information in my HTML which will be displayed as a kind of popup. I just toggle the visibility of by popup div from hidden to visible.

To set the position of my popup div, I have to calculate depending on the height of the image. So, I have to wait for the image to load to know its dimension before setting position and switching visibility to visible.

I tried tricks with recursion, setTimeout, complete img property, while loop... without success.

So, how can I do this? Maybe I should return dimensions in my Ajax call.

Answer 1

var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";

Note that it's important to do it in the order above: First attach the handler, then set the src. If you do it the other way around, and the image is in cache, you may miss the event. JavaScript is run on a single thread in browsers (unless you're using web workers), but browsers are not single-threaded. It's perfectly valid for the browser to see the src, identify the resource is available, load it, trigger the event, look at the element to see if it has any handlers that need to be queued for callback, not see any, and complete the event processing, all between the src line and the line attaching the handler. (The callbacks wouldn't happen between the lines if they were registered, they'd wait in the queue, but if there aren't any, the event isn't required to wait.)

Answer 2

Now .decode() is the best approach, bringing native promise functionality to image loading:

const img = new Image();
img.src = "https://picsum.photos/85/150";
img
  .decode()
  .then(() => {
    document.body.appendChild(img);
  })
  .catch(encodingError => console.error(encodingError));

Extending the above code, Promise.all can be used to load a batch of images in parallel (Promise.allSettled is useful if you want to keep going even if some images don't load).

const loadImage = async src => {
  const img = new Image();
  img.src = src;
  await img.decode();
  return img;
};

const imageUrls = [
  "https://picsum.photos/85/150",
  "https://picsum.photos/85/130",
  "https://picsum.photos/85/110",
];
Promise.all(imageUrls.map(loadImage))
  .then(images => {
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    const ctx = canvas.getContext("2d");
    images.forEach((image, i) =>
      ctx.drawImage(image, i * 90, 0, image.width, image.height)
    );
  })
  .catch(err => console.error(err));

---

For environments that don't support .decode(), you can promisify the onload and onerror callbacks.

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });

loadImage("https://picsum.photos/85/150").then(image => 
  console.log(image, `\nloaded? ${image.complete}`)
);

With the above function, Promise.all or Promise.allSettled can be used to load a batch of images in parallel.

const loadImage = src =>
  new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });

const imageUrls = [
  "https://picsum.photos/85/150",
  "https://picsum.photos/85/130",
  "https://picsum.photos/85/110",
];
Promise.all(imageUrls.map(loadImage))
  .then(images => {
    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    const ctx = canvas.getContext("2d");
    images.forEach((image, i) =>
      ctx.drawImage(image, i * 90, 0, image.width, image.height)
    );
  })
  .catch(err => console.error(err));

Improvements to loadImage might include additional parameters (such as crossOrigin, for example). A settings object or providing an Image as a parameter is another approach to generalize the function (setting src fires the request, so that should go last after handlers have been added).

Answer 3

If you use jQuery, you can use its load event.

Have a look at the example:

$('img.userIcon').load(function(){
    if($(this).height() > 100) {
        $(this).addClass('bigImg');
    }
});

Answer 4

Function to wait for image, that is already in HTML.

Promise example. Does not rejects just waits for load or fail:

function waitForImage(imgElem) {
    return new Promise(res => {
        if (imgElem.complete) {
            return res();
        }
        imgElem.onload = () => res();
        imgElem.onerror = () => res();
    });
}



// test
(async () => {
  const img = document.querySelector('img');
  // to not to cache in the test, set src dynamically
  img.src = 'https://www.gravatar.com/avatar/71094909be9f40bd576b1974a74966aa?s=48&d=identicon&r=PG&f=1';

  console.log('height before', img.naturalHeight); // 0
  await waitForImage(img);
  console.log('height after', img.naturalHeight); // 48
})();

<img src=""/>

Version with reject, if you need to know, if its failed:

function waitForImage(imgElem) {
    return new Promise((res, rej) => {
        if (imgElem.complete) {
            return res();
        }
        imgElem.onload = () => res();
        imgElem.onerror = () => rej(imgElem);
    });
}



// test
(async () => {
  const img = document.querySelector('#rightone');
  // to not to cache in the test, set src dynamically
  img.src = 'https://www.gravatar.com/avatar/71094909be9f40bd576b1974a74966aa?s=48&d=identicon&r=PG&f=1';

  console.log('height before', img.naturalHeight); // 0
  await waitForImage(img); // success
  console.log('height after', img.naturalHeight); // 48

  try {
    const failImg = document.querySelector('#wrongone');
    failImg.src = 'https://wrongimage';
    await waitForImage(failImg); // rejects after some time
  } catch(e) {
    console.log('failed to load image', e)
  }


})();

<img id="rightone" src="">
<img id="wrongone" src="">

Answer 5

just wrap your image onload in a function with a promise and then call it with await.

async drawImg(ctx, image){

    return new Promise(resolve => {

          image.onload = function () {
                ctx.drawImage(image, 10, 10, 200, 180);
                resolve('resolved');
             }

    });

  }

it should work just fine

Answer 6

How about the window load event?

window.addEventListener('load', (event) => {
  //do stuff with images
});

or

window.onload = (event) => {
  //do stuff with images
};

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

This worked for me where I needed the browser to calculate the size of the images before running a layout script.

Answer 7

UPDATE 2024

Just adding to the already given answers since this still ranks high on search engines. There is actually a builtin method now for exactly this use case. It's called decode and is just as simple as this:

const img = new Image();
img.src = "img/logo.png";
await img.decode();
// Do whatever you want with the loaded image

It will throw an error if the image fails to load, and you can catch it just like any other async function with .catch() or a try-catch block.

Answer 8

I had a slow CAPTCHA (1st_image) image loading on my page and I wanted to display another image (2nd_image) only AFTER the CAPTCHA image (1st_image) is loaded. So I had to wait for the CAPTCHA (1st_image) image to load first.

Here is the solution that works perfectly fine to wait for an image to load first and then load another image (don't forget to display a "please wait!" image while they are waiting for other image to load):

<script>
    function checkImageLoad() {
        if (document.getElementById("1st_image").complete == true) {
            console.log("1st_image Loaded!");
        }
        document.getElementById("2nd_image").src = "http://example.org/2nd_image.png";
    }
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://example.org/1st_image.png">
<img id="2nd_image" src="http://example.org/loading_please_wait.gif">

Either the Internet speed is slow or fast, and the browser will wait for the whole page to load with all the images (even if they are linked externally) and then execute the function, so the second image is displayed only after the first image loads fine.

Advanced note: You can use a web page URL in the "src" of the image to load a web page first and then show the image. The purpose is to load the cookie from the external webpage which might effect the second image displayed (like CAPTCHA).