jQuery实际图像尺寸

Question

我有一张1024x768的图片

<span class="frame">
<img alt="Image" title="Image" src="hD41120CA-7164-11DF-A79E-F4CE462E9D80_Green_Sea_Turtle.jpg">
</span> 

以下CSS将图片宽度设置为：

.frame img{
    width:425px;
}

并且jQuery代码

$('.uploaded_image img').attr("width");

返回 425

如何在 JavaScript 中获取图像实际宽度 1024？

- Mithun Sreedharan

---

https://dev59.com/cnRC5IYBdhLWcg3wXP0C - Adam

Answer 1

我不确定，但我认为所有与尺寸相关的函数（如.width()）将返回实际宽度而不是图像的真实宽度。

你可以在JavaScript中添加一个新图像，将源设置为原始图像的源，然后从该图像获取宽度。

以下是一个未经测试的示例：

tmp_image = new Image();
tmp_image.src = $('.uploaded_image img').attr("src");
image_width = tmp_image.width;

- jeroen

Answer 2

你必须知道，在图像完全加载之前，浏览器的JavaScript核心无法获取图像的宽度。我建议在图像对象的onload事件中获取该图像的宽度。

另一个问题是，你正在获取未通过节点传递的属性宽度...

设置图像的onload事件将类似于：

$('#imageid').load(function() { 
      $(this).css({ width: "", height: "" }).removeAttr("height").removeAttr("width");
      var REAL_WIDTH = this.width;
})

你的图片代码：

<span class="frame">
<img alt="Image" id="imageid" title="Image" src="http://localhost/zapav/site/assets/questions/D41120CA-7164-11DF-A79E-F4CE462E9D80_Green_Sea_Turtle.jpg">
</span> 

另外，我必须说，在缓存的图像中不会触发load事件...

- Garis M Suero

Answer 3

也许这样的东西会有用

对于那些您不想改变原始位置或图像的函数。

$(this).clone().removeAttr("width").attr("width");
$(this).clone().removeAttr("height").attr("height);

- holms