爲循環創建圖像（），但得到的寬度和高度不合格

Question

我不能得到一些圖像的width和height，但其他一些我可以通過Image.width和Image.height。爲什麼有些人能和有些人不能？ for循環問題

var i = 0; 
var len = imgitem.length; 
for(i = 0; i < len ; i++){ 
    imgSrc = imgitem[i].url; 

    imgObj = new Image(); 
    imgObj.src = imgSrc; 
    imgObj.onload = function(){ 
     console.log(imgObj.width); 
     imgObjW = imgObj.width; 
     imgObjH = imgObj.height; 
    }; 

    /*限制最大height*/ 
    if(imgObjH/imgObjW >= 1.5){ 
    ...... 

一些HTML元素

<div class="sfc-pic-play-item" style="width: 100%; overflow: hidden;"><div class="sfc-pic-play-item-wrap"><div class="c-img c-img-s" style="background:none"><img src="http://a.jpg" class="sfc-pic-play-center"></div></div></div> 

Answer 1

正如在評論中提到的，你的條件必須在onload處理程序中，或者它可能會在圖像加載之前執行。

而且，Jonas指出，imgObj當時沒有引用正確的對象也會出現問題。

imgitem.forEach(function(item){ 
    var img = new Image(); 
    img.src = item.url; 
    img.onload = function(){ 
     var w = img.width, 
      h = img.height; 

     console.log(item, img, w, h); 

     if(h/w >= 1.5){ 
       //... 
     } 
    } 
}); 

如果這仍然引發了一些錯誤，我們需要看你怎麼調整，爲您的代碼

Answer 2

簡單異步+：

for(i = 0; i < len ; i++){ 
(function(){ 
    var imgSrc = imgitem[i].url; 
    var imgObj = new Image(); 
    imgObj.src = imgSrc; 
    imgObj.onload = function(){ 
    console.log(imgObj.width); 
     imgObjW = imgObj.width; 
    imgObjH = imgObj.height; 
    /*限制最大height*/ 
    if(imgObjH/imgObjW >= 1.5){ ......} 
    }; 
    //imgObjH is 0 as it isnt loaded yet 
})(); 
} 

至於imageObj指的是最新的對象，你的onload處理難道不這樣做你的期望。使用上面的代碼修復或使用this而不是imageObj。另外，如果看起來有點錯位...