js判断图片加载完成后获取图片实际宽高的方法

介绍JavaScript如何准确获取图片加载后的真实尺寸

在网页开发中，获取图片加载完成后的实际宽度和高度是一个常见的需求。本文将向你介绍几种方法，帮助你通过JavaScript获取图片的真实尺寸。

你可能会尝试使用jQuery的`.width()`和`.height()`方法，或者使用JavaScript的`.offsetWidth`和`.offsetHeight`方法。这些方法返回的是图片在CSS样式中设置的宽度和高度，而非实际加载后的尺寸。那么，如何获取图片的实际尺寸呢？

有一个有效的方法是创建一个新的Image对象，并设置其源为你要测量的图片的URL。这样做的好处是，新的Image对象会在浏览器后台加载图片，而不会干扰当前页面的布局。加载完成后，你可以通过访问这个Image对象的`.width`和`.height`属性来获取图片的实际尺寸。

以下是实现这一方法的代码示例：

```html

```

```javascript

window.onload = function() {

var testImg = document.getElementById('test'); // 如果是使用jQuery，则换成对应的jQuery选择器

var imgObj = new Image(); // 创建新的Image对象

imgObj.src = testImg.src; // 设置Image对象的源为待测量图片的URL

alert('图片实际宽度：' + imgObj.width + '图片实际高度：' + imgObj.height); // 弹出实际尺寸

}

```

如果你想在其他函数或方法中获取这个尺寸信息，可以将上述代码封装成一个函数，然后在需要的地方调用这个函数。你也可以考虑将实际尺寸存储在变量中，以便在后续的代码中使用。

以上方法简洁明了，适用于大多数情况。如果你对JavaScript的其他内容也感兴趣，不妨继续，如事件处理、DOM操作、AJAX等。希望本文对你学习JavaScript有所帮助。如果你有任何疑问或建议，欢迎交流。

更多专题文章，请访问我们的网站，专题包括《JavaScript入门指南》、《JavaScript进阶技巧》、《Web开发实战》等。希望这些资源能对你的学习有所帮助。

注意：以上内容仅为参考，实际使用时需要根据具体情况进行调整。对于更复杂的情况或需求，可能需要更深入的和研究。