jquery获取img大小

在网页设计的世界里，图片是吸引用户眼球的重要元素之一，想要让图片在网页上呈现出最佳效果，了解它们的大小是必不可少的一步，如何使用jQuery来获取图片的实际尺寸呢？这篇文章就带你一探究竟。

我们需要明白，图片的尺寸有两种：一种是图片文件的原始尺寸，也就是图片在硬盘上的实际像素大小；另一种是图片在网页上显示的尺寸，也就是通过CSS或者HTML属性设置的尺寸，在大多数情况下，我们关心的是后者，因为它直接关系到图片在用户屏幕上的展示效果。

使用jQuery获取图片尺寸的方法其实很简单，你需要确保你的网页中已经引入了jQuery库，如果没有，可以通过添加以下代码来引入：

```html

```

我们可以通过jQuery选择器来选中图片元素，并使用`width()`和`height()`方法来获取其宽度和高度，这里有一个简单的示例：

```html

```

在这个例子中，我们通过`id`选择器选中了`id`为`myImage`的`img`元素，并获取了它的宽度和高度，这些值会以像素为单位返回，你可以直接在控制台中看到。

这个方法有一个局限性：它只能获取到图片在DOM加载完成后的尺寸，也就是图片被浏览器渲染后的尺寸，如果图片是通过JavaScript动态加载的，或者图片的尺寸是通过CSS设置的，那么在DOM加载时，图片可能还没有加载完成，或者尺寸还没有被应用，这时`width()`和`height()`方法返回的值可能不是你期望的。

为了解决这个问题，我们可以使用`load`事件，`load`事件会在图片完全加载后触发，这时我们可以安全地获取图片的尺寸：

```html

```

在这个例子中，我们给`img`元素绑定了一个`load`事件监听器，当图片加载完成后，事件处理函数会被调用，这时我们可以获取到图片的实际尺寸。

如果你需要获取图片的原始尺寸，可以通过创建一个`Image`对象，并监听它的`load`事件来实现：

```javascript

var img = new Image();

img.onload = function(){

console.log('原始图片宽度: ' + img.width + 'px');

console.log('原始图片高度: ' + img.height + 'px');

};

img.src = 'path/to/image.jpg';