Waiting for image to load in JavaScript

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).

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

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

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

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.

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.

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).