等待setAttribute（）方法以执行其他操作

Question

我正在使用普通的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()使其起作用，但有时仅起作用。

Answer 1

加载图像后，浏览器将触发“加载”事件。 （此外，您无需使用.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`;