如何檢索延期圖像的寬度和高度？

Question

我需要獲取從API加載的圖像的寬度和高度，不會將css應用於圖像。圖像可能有不同的大小取決於在API中加載的內容在使用jquery或vanilla js的時刻，我的寬度和高度總是爲0？

我的代碼有什麼問題？我應該在創建img標籤時動態設置寬度和高度嗎？怎麼做？

this.getItemSize = function() { 
     var elm = $('#' + scope.elmItem); 
     var pos = elm.offset(); 

     /* also with this vanila js does not work 
     var image = document.getElementById(scope.elmItem); 
     console.log(image); 
     var width = image.offsetWidth; 
     var height = image.offsetHeight; 
     */ 

     scope.itemTop = pos.top; 
     scope.itemLeft = pos.left; 
     scope.itemWidth = elm.width(); 
     scope.itemHeight = elm.height(); 
     console.log(scope.itemTop + " " + scope.itemLeft + " " + scope.itemWidth + " " + scope.itemHeight); 
    }; 



      $.get(this.url, function(image) { 
       // add img to the dom 
       var img = $('<img id="item">'); 
       img.attr('src', scope.url); 
       img.appendTo('#' + scope.elm); 

       scope.getItemSize(); 
      }); 

Answer 1

你需要調用getItemSize圖像加載後，您可以使用.load()事件處理程序來做到這一點

$.get(this.url, function(image) { 
    // add img to the dom 
    var img = $('<img id="item">'); 
    img.load(function(){ 
     scope.getItemSize(); 
    }) 
    img.attr('src', scope.url); 
    img.appendTo('#' + scope.elm);