测量图像的宽度和高度 returns 0 在 Chrome 和 Firefox 中，但在 Safari 中有效

Question

我正在尝试通过测量加载时图像的尺寸，在 Wordpress 图片库中为我的图像设置横向或纵向 class。该代码在 Safari 中有效，但 Firefox returns 宽度和高度为 0 像素，并且 Chrome 有时会正确加载它们，有时则不会。我很困惑，有人可以帮我吗？

jQuery(window).on('load', function () {

    jQuery(".blocks-gallery-grid img").each(function() {

        var aspectRatio = jQuery(this).css('width', 'auto').width()/jQuery(this).css('height', 'auto').height();
            console.log(jQuery(this).attr('src'));
            console.log(jQuery(this).width());
            console.log(jQuery(this).height());
        jQuery(this).data("aspect-ratio", aspectRatio);

        if(aspectRatio > 1) {
            jQuery(this).parent().parent().parent('li').addClass( "landscape" );

        } else if (aspectRatio < 1) {
            jQuery(this).parent().parent().parent('li').addClass( "portrait" );
        } else {
            jQuery(this).parent().parent().parent('li').addClass( "landscape" );           
        }
    });
});

Answer 1

$(window).on('load', function() { 
    $(".blocks-gallery-grid img").each(function() {
        let _this = $(this),
            aspectRatio = _this.width()/_this.height(),
            parentLi = _this.closest('li');
            
        if(aspectRatio > 1) {
            parentLi.addClass( "landscape" );
        } else if (aspectRatio < 1) {
            parentLi.addClass( "portrait" );
        } else {
            parentLi.addClass( "landscape" );           
        }
    });
});

img{
  max-width: 100%;
}
li{
   padding: 15px; 
   box-sizing: border-box; 
   border: 3px solid;
}
.landscape{
   border-color: red;
}
.portrait{
   border-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="blocks-gallery-grid">
  <li>
    <img src="https://dummyimage.com/600x400/000/fff">
  </li>
  <li>
    <img src="https://dummyimage.com/400x600/000/fff">
   </li>
</ul>

你能试试这样吗:

$(window).on('load', function () {

    $(".blocks-gallery-grid img").each(function() {
        let _this = $(this);

        let aspectRatio = _this.width()/_this.height();

        _this.data("aspect-ratio", aspectRatio);

        if(aspectRatio > 1) {
            _this.parent().parent().parent('li').addClass( "landscape" );

        } else if (aspectRatio < 1) {
            _this.parent().parent().parent('li').addClass( "portrait" );
        } else {
            _this.parent().parent().parent('li').addClass( "landscape" );           
        }
    });
});

此外，我假设 li 是该元素的唯一列表项父级，因此您可以省略所有 .parent() 选择器并使用：.closest().

测量图像的宽度和高度 returns 0 在 Chrome 和 Firefox 中，但在 Safari 中有效

Measuring width & height of images returns 0 in Chrome and Firefox, but works in Safari

jquery

css

image

onload

dimensions