jQuery 实际图像尺寸答案

【问题标题】：jQuery Actual image diamensionjQuery 实际图像尺寸
【发布时间】：2010-06-09 23:19:45
【问题描述】：

我有一张 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

如何在 JavaScipt 中检索图像 1024 的实际宽度？

【问题讨论】：

stackoverflow.com/questions/318630/…

标签： javascript jquery html css image

【解决方案1】：

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

您可以做的是在 javascript 中添加一个新图像，将源设置为原始图像的源并从中获取宽度。

一个未经测试的例子：

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

【讨论】：

【解决方案2】：

您必须知道，在图像完全加载之前，浏览器 javascript 核心无法使用图像的宽度。我建议在图像对象的 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>

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

【讨论】：

【解决方案3】：

也许这样的东西会有用

对于您不想更改原始位置或图像的功能。

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

【讨论】：