jQuery获取图片尺寸

Question

我正在使用jQuery创建一个照片库。我在加载时采取并调整图像大小以创建缩略图。我想获取图像尺寸的原始值，以便稍后将其恢复到原始大小。有人知道如何做吗？我有以下代码：

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

这个循环遍历了容器div中的所有图像。然后我尝试执行以下操作：

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

任何想法？

- ngreenwood6

---

https://dev59.com/bHRB5IYBdhLWcg3wcm2d - Малъ Скрылевъ

Answer 1

我最近问了同样的问题，得到了一个很好的答案：创建一个新的图像元素，但不连接到DOM。它的高度和宽度是图片的原始尺寸。 编辑：我已经根据评论承诺编辑了我的问题的答案。现在图像大小的检测绑定到图像的onload事件上，以保证可靠的结果。

- Pekka

Answer 2

如果一个元素被隐藏了，你就无法获取它的大小。如果你想在显示之前获取它的宽度或高度，你需要给它一个负偏移量，比如：

``` #your_image {left:-1000%;} ```

只有这样，你才能获取到它的大小。

$(this).width()

将会返回结果。

- Sinan

---

一个注释对于-1会很好。 - Sinan

Answer 3

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

- sanris

---

我认为你在这里使用了imagesLoaded jQuery插件，它是一个必要的解释。 - Duncanmoo

Answer 4

使用jQuery获取图像大小的问题在于通常我们使用$().ready(function());来执行我们的javascript，但是在页面加载时，图像尚未加载，因此您需要先等待它发生。一旦您确定图像已加载并且图像可见，您可以像往常一样使用$.width()和$.height()。

如果您正在使用脚本语言生成图像大小，则可以尝试将宽度和高度属性放在读取文件并以这种方式获取大小之后。由于您正在制作一个画廊，因此您可能要考虑使用imagemagick或gd for php在后端调整图像大小。有关这些工具的文档在线上有很多，所以我不会在这里详细介绍。

- Aaron