更改src后获取图像的高度

3 回答

• 0

  在设置 src 之后，您正试图获取 height 并且图像还没有时间下载 . 您需要等到图像加载后再使用更合适的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">
  

  回复于 2024-05-16T18:30:05+08:00
• 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>
  

  回复于 2024-05-16T18:30:05+08:00
• 2

  在访问图像的 height 和 width 维度属性之前，您需要确保图像已成功加载 .

  这可以通过向 img 元素添加 load 事件处理程序来实现 . Note ：必须在设置 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">
  

  回复于 2024-05-16T18:30:05+08:00