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

Posted 2023-05-08

【中文标题】测量图像的宽度和高度在 Chrome 和 Firefox 中返回 0，但在 Safari 中有效

【英文标题】：Measuring width & height of images returns 0 in Chrome and Firefox, but works in Safari

【发布时间】：2021-07-13 16:09:06

【问题描述】：

我试图通过在加载时测量图像的尺寸，在 Wordpress 图片库中为我的图像提供横向或纵向类。该代码在 Safari 中有效，但 Firefox 返回 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" );           
        
    );
);

【问题讨论】：

不是问题的根源，但您确实应该在这里使用一些变量。您正在为每个图像创建 9 个 jQuery 对象 (jQuery(this))。为什么else 分支与if 分支相同？将> 替换为>= 即可摆脱else 分支。您还可以将jQuery(this).parent().parent().parent('li') 存储在一个变量中，这样您就不必在 DOM 结构发生变化时在多个位置进行更改。

感谢您的反馈。我不是一个程序员，但我通过谷歌搜索和在网站上阅读已经做到了这一点。我会根据您的建议改进我的脚本。

【参考方案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()。

【讨论】：

有趣的是，这会将所有内容都返回为纵向。我还尝试在隔离环境中运行脚本，就像您制作的 sn-p 一样，它运行良好。考虑到它可以在其他地方使用，它可能是一个插件干扰（尽管我几乎没有使用任何插件）或与 wordpress 相关的问题。不过感谢您的帮助，非常感谢！

太棒了，考虑接受答案。谢谢！