javascript - 等待setAttribute()方法以执行其他操作

我正在使用普通的javascript来更改img标签src属性，如下所示：

let headerImage = document.getElementById('header-img');
headerImage.setAttribute('src', `./img/${newSrc}.png`);
headerImage.style.left = `calc(50vw - ${headerImage.naturalWidth / 2}px)`;

现在，该脚本的第三行将不再等待第二行完成，因此使这段代码：headerImage.naturalWidth对我无用。

因此，是否有一种方法可以等待setAttribute()完成以执行脚本的最后一行？

提前致谢。

PD：stackoverflow中存在一个问题，鼓励使用setTimeout()使其起作用，但有时只能起作用。

最佳答案

加载图像后，浏览器将触发“加载”事件。 （此外，您无需使用.setAttribute()；您只需设置“ src”属性即可。）

let headerImage = document.getElementById('header-img');
headerImage.onload = function() {
    headerImage.style.left = `calc(50vw - ${headerImage.naturalWidth / 2}px)`;
};
headerImage.src = `./img/${newSrc}.png`;