getBoundingClientRect () возвращает 0 для ширины и высоты изображения - PullRequest
Новая
       45

getBoundingClientRect () возвращает 0 для ширины и высоты изображения

1 голос
/ 24 февраля 2020

Как использовать 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();

1 Ответ

2 голосов
/ 24 февраля 2020

Это потому, что изображение не загружается во время 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();
...