jQuery获取容器中加载的图像宽度/高度

Question

我正在使用一个插件，它要求我在加载图像后获取图像的宽度和高度，而不管图像的尺寸是如何确定的。

<img src=".." width="500" height="500" />                <!-- works fine -->
<img src=".." style="width: 500px; height: 500px;" />    <!-- works fine -->
<img src=".." width="500" />                             <!-- only gives me width -->
<img src=".." style="width: 500px;" />                   <!-- only gives me width -->
<img src=".." style="width: 500px; height: auto;" />     <!-- only gives me width -->
<img src=".." />                                         <!-- doesn't work at all -->

我曾尝试加载图像并在之后获取其尺寸，但我只能获取图像的实际大小，而不是它在页面上显示的大小。

我用来获取宽度/高度的代码:

img.innerWidth();

我也试过:

$('<img/>').hide().attr('src',img.src).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo($('body'));

和:

$("<img/>").attr("src", img.attr("src")).load(function() {
   img.width = this.width;
   img.height = this.height;
});

它在获取图像的原始大小方面做得很好，但不是加载和显示时的大小。

Answer 1

我的解决方案

img.clone().load(function() {
    img.Dwidth = $(this).width();
    img.Dheight = $(this).height();
}).appendTo(img.parent()).hide();

为了获得显示尺寸，在我的特定情况下，我必须克隆元素，重新加载它并获得尺寸。