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

Question

我有一个 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">

Answer 1

您正试图在设置 src 之后获取 height 并且图像还没有时间下载。您需要等到图像加载完毕，然后使用更合适的 window.getComputedStyle() 获取 height ，它考虑了 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">