javascript - img.height() 和 img.width() 在 chrome 中返回 0，但在 mozilla 中返回正确值

Question

我的标记中有一个图像字段。我正在使用jquery 设置它的来源。我需要它的高度和宽度。为此，我使用了 image.height() 和 image.width() 方法。它在 mozilla 中正常工作但在 chrome 中不正常，我已经尝试过 image.height 和 image.width 方法，但没有得到任何值(value)。我也尝试过将 prop 方法更改为 attr 以设置图像 src，但它也给了我相同的结果。我在这里粘贴我的代码。

html

<div>
<img src class="my-image"/>
</div>

Jquery

$(document).ready(function(){
var img = $(".my-image");
imageWidth = $('.my-image').width();
        imageHeight = $('my-image').height();
        alert(imageHeight);
});

这里有什么错误？感谢任何帮助

Answer 1

发生的事情是图像尚未加载到 $(document).ready(); 并且此时元素的尺寸为 0px by 0 像素。为了确保您的图像已加载，请使用 $(window).load(); 事件而不是文档就绪。

$(window).on("load", function(){
    var img = $(".my-image"),
        imageWidth = $('.product-image-og-size').width(),
        imageHeight = $('img.product-image-og-size').height();
        alert(imageHeight);
});