jquery获取图片大小答案

【问题标题】：jquery get image sizejquery获取图片大小
【发布时间】：2011-01-03 12:43:10
【问题描述】：

我正在使用 jquery 创建一个照片库。我正在加载图像并调整其大小以创建缩略图。我想获得图像大小的原始值，以便稍后我可以将其恢复到原始大小。有人知道怎么做吗？我有以下代码：

    obj.find("img").each(function(){
});

这将遍历容器 div 中的所有图像。然后我尝试这样做：

$(this).width(); //didnt work
this.width; //didnt work

有什么想法吗？

【问题讨论】：

【解决方案1】：

如果一个元素是隐藏的，你不能得到它的大小，如果你想在显示它之前得到它的宽度或高度，你需要给一个负偏移量，比如

#your_image {left:-1000%;}

只有这样

$(this).width()

将返回结果。

【讨论】：

【解决方案2】：

$("#your_img").imagesLoaded(function(){<br>
alert( $(this).width() );<br>
alert( $(this).height() );<br>
});

【讨论】：

【解决方案3】：

我最近问了the same question，得到了一个很好的答案：创建了一个新的图像元素，但没有附加到 DOM。它的高度和宽度是图像的原始尺寸。

编辑：我现在按照 cmets 中的承诺编辑了我的问题的答案。图像大小的检测现在绑定到图像的onload 事件，以保证可靠的结果。

【讨论】：

【解决方案4】：

使用 jQuery 获取图像大小的问题是我们通常使用 $().ready(function());执行我们的javascript，但此时页面加载，图像还没有加载，所以你需要先等待它发生。一旦您确定图像已加载并且图像可见，您就可以正常使用 $.width() 和 $.height()。

如果您使用脚本语言生成图像尺寸，您也可以尝试一件事，即在读取文件并以这种方式获取尺寸后放置宽度和高度属性。由于您正在制作画廊，您可能会考虑在后端使用 gd for php 的 imagemagick 调整图像大小。这些工具有很多在线文档，所以我不会在这里深入。

【讨论】：