1

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

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

哪个可以很好地让我获得图像的原始大小，而不是加载和显示时的大小。

4

4 回答 4

1

我的解决方案

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

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

于 2012-11-16T14:02:58.810 回答
0

您应该使用 jQuerywidth或height进行计算，并且如果该项目可见，您总是得到 0。如果您更新下面的代码，它应该可以工作。

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

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

于 2012-11-16T13:10:54.920 回答
0

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

 $(window).load(function(){
    console.log($('img').width());
});
于 2015-09-11T13:42:34.260 回答
0 
var getheight = function () {
var img = document.getElementById("pic");
var img_width = img.clientWidth;
}

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

于 2015-10-12T06:52:06.227 回答