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后，您正试图获取src，而图像还没有时间下载。您需要等到图像加载完毕后，再使用更合适的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">

Answer 2

在访问图像的height和width尺寸属性之前，需要确保图像已成功加载。

这可以通过向您的load元素添加img事件处理程序来实现。注意：您必须在设置src属性之前添加事件侦听器，以确保在图像加载开始后调用加载处理程序。

load事件的另一个特征如下所示：每当img元素成功加载图像时，将调用该事件。因此，您可以动态更改img上的src属性，这将导致调用相同的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 3

您始终可以将需要加载的代码包装起来，然后等待将其加载到Promise中，以便于重用：

//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>

更改src后获取图像的高度

3 个答案: