Question

我正在尝试从页面上每个图像的高度和宽度获取比率。我一直得到NaN结果，不确定为什么。

我已经使用get（）和find（）

<div class='image-wrapper'>
    <div>
        <img src='views/images/greenstone.jpg' class='row-img'>
    </div>
    <div>
        <img src='views/images/home_conch.jpg' class='row-img'>
    </div>
    <div>
        <img src='views/images/home_keiki.jpg' class='row-img'>
    </div>
    <div>
        <img src='views/images/home_fire.jpg' class='row-img'>
    </div>
</div>

$('img.row-img').each(function() {
    var ratio = $(this).height() / $(this).width();
    console.log(ratio);
});

我期望像1.234这样的浮点我得到NaN

编辑：控制台日志返回

    Object(1)
    0: <img class="row-img" src="views/images/greenstone.jpg">
    length: 1
    <prototype>: Object { jquery: "3.1.1", constructor: r(), length: 0, … }

Answer 1

这里的问题是脚本在图像加载之前运行。因此它们的尺寸是不确定的。

您可以通过在窗口 load 事件处理程序中运行脚本来避免这种情况

$(window).on('load', () => {
  $('img.row-img').each(function() { ... })
})

Answer 2

我怀疑您的图像加载较晚（异步）。你的逻辑还可以。只是在这里复制您的解决方案。删除超时，然后看到您将获得最后一张图片的NaN。

setTimeout(function(){

  $('img.row-img').each(function() {
    var ratio = $(this).height() / $(this).width();
    console.log($(this).height() +'/'+  $(this).width() +' = '+ ratio);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='image-wrapper'>
    <div>
        <img src='https://picsum.photos/id/0/500/600' class='row-img'>
    </div>
    <div>
        <img src='https://picsum.photos/id/1000/440/350' class='row-img'>
    </div>
    <div>
        <img src='https://picsum.photos/id/10/450/370' class='row-img'>
    </div>
    <div>
        <img src='https://picsum.photos/id/1003/800/900' class='row-img'>
    </div>
</div>

为什么我从jquery的高度和宽度中得到NaN结果？

2 个答案: