for loop, um Bild() zu erstellen, aber die Breite und Höhe fehlgeschlagen

Question

Ich kann einige Bilder width und height nicht bekommen, aber einige auf einigen anderen kann ich über Image.width und Image.height. Warum manche können und manche nicht?

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){ 
    ...... 

einige HTML-Element

<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

Wie im Kommentar erwähnt, muss Ihre Bedingung innerhalb des onload-Handlers liegen, oder es wird/wird ausgeführt, bevor das Bild geladen wird.

Und wie Jonas darauf hingewiesen hat, wird es auch ein Problem geben, wenn imgObj nicht auf das richtige Objekt zu der Zeit verweist.

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){ 
       //... 
     } 
    } 
}); 

Wenn dies noch einige Fehler wirft, müssen wir sehen, wie Sie Ihren Code angepasst, dass

Answer 2

Einfache async + for-Schleife Problem:

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 
})(); 
} 

Als imageObj auf die neueste Objekt verweist, würde nicht Ihre onload-Handler tun, was Sie erwarten. Verwenden Sie den oberen Code, um this anstelle von imageObj in Ihrem onload zu reparieren oder zu verwenden. Auch das if sieht ein bisschen fehlplatziert da ...