代码之家 › 专栏 › 技术社区 › Vald

获取更改SRC后图像的高度

image javascript

1

Vald · 技术社区 · 7 年前

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

3 回复 | 直到 7 年前

1

2

Scott Marcus 7 年前

你试图得到 height 就在你设置了 src 图像还没来得及下载。您需要等待图像加载,然后获取 高度 使用更合适的 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">

2

Dacre Denny 7 年前

您需要确保图像已成功加载,然后才能访问 height 和 width 维度属性。

这可以通过添加 load 事件处理程序到 img 元素。注释 :在设置 src 属性,以确保在图像加载开始后调用加载处理程序。

另一个特点是 负载 如下所示的事件是每次 即时消息 元素成功加载图像。因此,您可以更改 SRC img上的属性是动态的,这将导致相同的 负载 要调用的事件处理程序:

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

3

0

Intervalia 7 年前

您可以始终包装加载所需的代码,并等待它加载到一个更容易重用的承诺中:

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