javascript - getBoundingClientRect() 为图像的宽度和高度返回 0

Question

我如何使用 getBoundingClientRect() 来确定图像的宽度和高度

function popUp() {
  var img = document.createElement('img');
  img.id = "TT";
  img.src = "https://picsum.photos/200/300";
  document.body.appendChild(img);
  var img = document.getElementById("TT");
  console.log(img)
  var dims = img.getBoundingClientRect();
  console.log(dims)
}
popUp();

Answer 1

这是因为在log. 你需要console.log里面的onload功能

function popUp() {
  var img = document.createElement('img');
  img.id="TT";
  img.src="https://picsum.photos/200/300";    
  document.body.appendChild(img);
  img.onload = function(){
    var img = document.getElementById("TT");
    var dims = img.getBoundingClientRect();
    console.log(dims)
  }
}
popUp();

如果您希望该函数等待该函数的进一步执行，直到加载图像，您可以创建一个承诺，然后等待它。但这会使代码的结构异步

async function popUp() {
  var img = document.createElement('img');
  img.id="TT";
  img.src="https://picsum.photos/200/300";    
  document.body.appendChild(img);
  const imageLoaded = new Promise((res, rej) => {
    img.onload = function(){
      var img = document.getElementById("TT");
      var dims = img.getBoundingClientRect();
      res(dims)
    }
  });
  
  const data = await imageLoaded;
  console.log(data)
	
}
popUp();