Delay execution of Javascript code until image loads

Question

My javascript code requires an image to load before it can proceed with the rest of the script:

var myImage = new Image();
myImage.onload = function() {
   executeRemainingCode();
};
myImage.src = myImgURL;

function executeRemainingCode() {
// 2,000 lines of remaining code to execute
}

It works fine, however, I would prefer not to wrap thousands of lines of remaining code into a function. It makes the indentation and parentheses more complicated for the entire script.

Is there a way to delay execution of the remaining code, without wrapping it all in a function?

If that's suitable to you, you can wait for the 'load' event, it will be triggered when everyting is loaded including images — Lk77, Dec 28 '22 at 17:10

kennarddh · Accepted Answer · 2022-12-28T17:43:51.623

2

You can use promise

@Sebastian Simon You can simply use top-level await instead.

const ImagePromise = (src) => new Promise((resolve) => {
  const myImage = new Image();
  
  myImage.onload = () => {
   resolve();
  };

  myImage.src = src;
})

await ImagePromise(myImageUrl)

// 2,000 lines of remaining code to execute

edited Dec 28 '22 at 17:43

answered Dec 28 '22 at 17:36

kennarddh

2,186
2
6
21

A promise all call might be good too – Daniel A. White Dec 28 '22 at 17:38
_“but you still need to wrap with an async function”_ — No, you can simply use [top-level `await`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/await#top_level_await) instead. – Sebastian Simon Dec 28 '22 at 17:39
This is really cool. Worked perfectly. I was not aware of await. Very helpful, thank you! – jm92 Dec 28 '22 at 18:03

Delay execution of Javascript code until image loads

1 Answers1