javascript - for 循环创建 Image()，但获取宽度和高度失败

Question

我无法获得某些图像的宽度和高度，但我可以通过Image.width和获取某些图像的一些图像。图片.高度。为什么有的可以，有的不能？

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-handler 内，否则它可能/将在加载图像之前执行。

正如 Jonas w 指出的那样，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){
                //...
        }
    }
});

如果这仍然会引发一些错误，我们需要看看您是如何将其调整到您的代码中的