jQuery获取容器内加载的图像宽度/高度答案

【问题标题】：jQuery getting image width/height loaded within a containerjQuery获取容器内加载的图像宽度/高度
【发布时间】：2012-11-05 04:57:24
【问题描述】：

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

<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;
});

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

【问题讨论】：

插件或者你的代码必须是抓取width属性，而不是寻找元素的宽度。
你用什么代码来获取宽度和高度？
Take a look at this
您是否使用了特定的插件来加载图像？小提琴也可能有帮助
@MikeB，我没有使用特定的插件来加载图像，而是我正在制作一个需要我获取图像显示宽度和高度的插件。我会开始学习小提琴。

标签： jquery css image

【解决方案1】：

var getheight = function () {
var img = document.getElementById("pic");
var img_width = img.clientWidth;
}

图片加载完成后调用此函数。 clientWidth 属性将在加载后为您提供图像大小

【讨论】：

【解决方案2】：

当您使用 $(window).load 函数加载脚本时，您将从图像中获取大小。

 $(window).load(function(){
    console.log($('img').width());
});

【讨论】：

【解决方案3】：

我的解决方案

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

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

【讨论】：

【解决方案4】：

你应该使用 jQuery width 或 height 来计算，如果项目可见，你总是得到 0。如果你更新下面的代码，它应该可以工作。

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

如您所见，如果您在第二个块中使用了 $(this).width() 而不是 this.width，它应该可以工作。

【讨论】：

不幸的是，情况并非如此，它不起作用。此外，这给了我原始图像尺寸，而不是显示在容器内或仅定义了宽度值的图像的尺寸。
“加载和显示时”是什么意思。这个函数应该给出图像的尺寸，但是如果你有另一个元素显示图像的不同宽度或高度（通过 attr 或 CSS），你应该在那个对象上使用 $().width()。
joeyvo.me/lensview 我添加了您的代码，尽管它在小提琴中似乎工作正常，但在我的插件中却没有。