javascript - 更改src后获取图像的高度

我有一个img元素，其中的src属性为空。该图像的src是动态更改的（取决于用户要转到的页面）。

然后，我需要检索图像的高度（不使用jQuery）。

这是我的代码：

var myImg = document.getElementById("myImg");

myImg.src = "http://lorempicsum.com/rio/350/200/1";

console.log(myImg.height); // 0 (Expected : 200)

<img src="" alt="" id="myImg">

最佳答案

设置height后，您正试图获取src，并且图像还没有时间下载。您需要等待，直到图像加载完毕，然后使用更适当的height来获取window.getComputedStyle()，该考虑了CSS规则。

var myImg = document.getElementById("myImg");

// Set up a load event callback, which won't run until the image
// has been fully downloaded to the client.
myImg.addEventListener("load", function(){
  // Use getComputedStyle() to get the most accurate information
  console.log(getComputedStyle(myImg).height); // "200px"
});

// Only after you've configured the load callback function should you change the source.
myImg.src = "http://lorempicsum.com/rio/350/200/1";

<img src="" alt="" id="myImg">