Получить высоту изображения после изменения 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

Вы должны быть уверены, что изображение успешно загружено, прежде чем вы получите доступ к его height и width атрибутам измерения.

Это может быть достигнуто путем добавления обработчика load к вашему img элемент. Примечание : необходимо добавить прослушиватель событий перед установкой атрибута src, чтобы гарантировать, что обработчик загрузки будет вызываться после начала загрузки изображения.

Другая характеристика события loadкак показано ниже, это событие будет вызываться каждый раз, когда элемент img успешно загружает изображение.Поэтому вы можете динамически изменять атрибут src в img, что вызовет тот же самый обработчик события load:

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

// Add event listener before setting src attribute
myImg.addEventListener('load', function() {

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



// This code is added to show how the load event handler
// is still called even when images are switched dynamically
setInterval(function() {

  if(Math.random() > 0.5) {
    myImg.src = "http://lorempicsum.com/rio/350/200/1";
  }
  else {
    myImg.src = "https://lorempicsum.com/rio/350/200/2"
  }
  
  console.log(myImg.src)
}, 2000)

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

Answer 2

Вы всегда можете обернуть код, необходимый для загрузки, и дождаться его загрузки в обещание для упрощения повторного использования:

//Promise based loading routine
function loadImg(url) {
  return new Promise(
    (resolve, reject) => {
      var tempImg = new Image;
      tempImg.src = url;
      
      function load() { 
        tempImg.removeEventListener('load', load);
        tempImg.removeEventListener('error', error);
        resolve(tempImg);
      }

      function error(evt) { 
        tempImg.removeEventListener('load', load);
        tempImg.removeEventListener('error', error);
        reject(evt);
      }

      // Add event listener before setting src attribute
      tempImg.addEventListener('load', load);
      tempImg.addEventListener('error', error);
    }
  )
}


// Example of using promise based loading routine
var displayImg = document.getElementById('main');
var info = document.getElementById('info');

loadImg('https://images.pexels.com/photos/768473/pexels-photo-768473.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500').then(img => {
  displayImg.src = img.src;
  info.textContent = img.width+' x '+img.height;
}).catch(err => console.log(err));


setTimeout(() => {
  loadImg('https://images.pexels.com/photos/768473/pexels-photo-peg?auto=compress&cs=tinysrgb&dpr=1&w=500').then(img => {
    displayImg.src = img.src;
    info.textContent = img.width+' x '+img.height;
  }).catch(err => console.log(err));
}, 4000);

<img id="main"/>
<span id="info"></span>

Answer 3

Вы пытаетесь получить 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">