JavaScript获取图片加载完成后的实际宽高
"本文主要介绍如何使用JavaScript在图片加载完成后获取其实际的宽高,避免因设置CSS样式导致的尺寸误差。文中提供了两种不同的实现方式,适用于不同场景下的需求。" 在网页开发中,我们经常需要获取图片的真实尺寸,特别是在图片的CSS样式被设置为特定宽度或高度时。JavaScript 提供了多种方法来获取图片的尺寸,但这些方法并不总是能返回图片的原始或实际尺寸。例如,`.width()` 和 `.height()` 方法在图片已经设置了样式宽高时,返回的是设置的值而非图片本身的尺寸。类似地,`.offsetWidth` 和 `.offsetHeight` 属性也会受到CSS的影响。 一种解决办法是利用图片的 `onload` 事件来确保在图片完全加载后获取尺寸。以下是一种实现方法: ```javascript // 获取ID为 "test" 的图片元素 var _test = document.getElementById("test"); // 当图片加载完成后执行函数 _test.onload = function() { imgSize.call(_test); } // 定义获取图片尺寸的函数 function imgSize() { var imgObj = new Image(); // 创建一个新的 Image 对象 imgObj.src = this.src; // 设置新对象的源为当前图片的源 alert(imgObj.width + "\n" + imgObj.height); // 输出图片的实际宽高 } ``` 上述代码首先监听图片的 `onload` 事件,然后在事件触发时调用 `imgSize` 函数,通过新的 `Image` 对象获取未受CSS影响的原始尺寸。如果需要在其他地方使用这些尺寸,可以将 `alert` 替换为 `return imgObj` 并在需要的地方调用。 另一种简化后的实现方式如下: ```javascript window.onload = function() { var _test = document.getElementById("test"); // 或者 var _test = $("#test"); 如果使用 jQuery var imgObj = new Image(); imgObj.src = _test.src; // 或者 imgObj.src = _test.attr("src"); 如果使用 jQuery var realWidth = imgObj.width; var realHeight = imgObj.height; // 在此处使用 realWidth 和 realHeight } ``` 这个简化版直接在 `window.onload` 事件中处理图片加载,避免了额外的函数定义。这种方式更加简洁,但同样能有效获取图片的实际宽高。 总结起来,要获取图片的原始宽高,关键在于等待图片加载完成并使用新的 `Image` 对象来读取尺寸。这种方法避免了CSS样式对尺寸检测的影响,确保了获取到的是图片的真实尺寸。在实际开发中,可以根据项目需求选择适合的实现方式。
![](https://csdnimg.cn/release/download_crawler_static/13013929/bg1.jpg)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)