How do I make an image load synchronously?

Question

I want to create an object that has an image property, but I want the contstructor to finish running only once the image is loaded. Or to describe this with code:

Answer 1

There is a non-evil way to load images in Javascript synchronously.

loadImage = async img => {
    return new Promise((resolve, reject) => {
        img.onload = async () => {
            console.log("Image Loaded");
            resolve(true);
        };
    });
};

Call it with await anywhere. like this

for(let i=0;i

It will load all images one by one.

Note: Calling function must be async to use await