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

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

Answer 2

你应该使用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它应该可以工作。

Answer 3

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

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

Answer 4

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

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

jQuery在容器中加载图像宽度/高度

4 个答案: