Better way than setInterval to wait for an image load?

Question

This is really a simple affair, I just wonder if there is a better way to do it:

let el = document.querySelectorAll('#comic img');
let loadPromise = new Promise(function(resolve, reject) {
    let ticker = setInterval(() => {
        if (el[0].complete) {
            clearInterval(ticker);
            resolve();
        }
    }, 100);
    setTimeout(() => {
        clearInterval(ticker);
        reject('Timeout');
    }, 5000)
});

loadPromise.then(() => {
    console.log(el[0].naturalWidth);
    let container = document.querySelectorAll('.main-wrapper > div > section > section.column.column-1.grid-left-4.grid-width-16');
    container[0].style.width = (el[0].naturalWidth + 420) + 'px';
});

I must wait for the image to load, so I know its size so that I can adjust an element on the page.

But setInterval(aka polling the element) seems so... medieval. Is there a nicer way in modern JS?

Answer 1

"Must wait for the image to load" ... "Is there a nicer way?"

Yes,
At first, instead of accessing the image by index el[0] - extract the image at once and give the variable meaningful name:

let img = document.querySelectorAll('#comic img')[0];

Next, you need to embed "load" event listener into Promise executor function to ensure the image has loaded:

let loadPromise = new Promise(function(resolve, reject) {
    img.addEventListener('load', function() {
       resolve();
    });
    setTimeout(() => {
        if (!img.complete) reject('Timeout');
    }, 5000)
});
loadPromise.then(() => {
    console.log(img.naturalWidth);
    let container = document.querySelectorAll('.main-wrapper > div > section > section.column.column-1.grid-left-4.grid-width-16');
    container[0].style.width = (img.naturalWidth + 420) + 'px';
});