Javscript/jquery 获取图片宽高代码

时间：2014-06-24 编辑：简简单单来源：一聚教程网

一、简陋的获取图片方式

代码如下	复制代码
// 图片地址后面加时间戳是为了避免缓存 var img_url = '/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'+img.height);

执行：

宽高都是0的这个结果很正常，因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化！

二、onload后在打印

代码如下	复制代码
// 图片地址后面加时间戳是为了避免缓存 var img_url = '/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height); };

执行：

通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢，不实用，但只要图片被浏览器缓存，那么图片加载几乎就不用等待即可触发onload，我们要的是占位符。所以有些人通过缓存获取也可以这么写。

三、通过complete与onload一起混合使用

为了测试缓存效果，注意以下测试图片的url都不加时间戳

代码如下	复制代码
// 图片地址 var img_url = '/13643608813441.jpg'; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 判断是否有缓存 if(img.complete){ // 打印 alert('from:complete : width:'+img.width+',height:'+img.height); }else{ // 加载完成执行 img.onload = function(){ // 打印 alert('from:onload : width:'+img.width+',height:'+img.height); }; }

jquery方式获取

前提是图片路径是正确的...

代码如下	复制代码
var img = new Image(); img.src="http://www.baidu.com/img/baidu_sylogo1.gif"; img.onload = function(){ alert(this.width); alert(this.height); this.onload=null; }

通过$("#img").attr("width");这种方式获取的值,有时候是不正确的

jquery还有另一种办法

代码如下	复制代码
var pic_real_width, pic_real_height; $("") // Make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; // Note: $(this).width() will not pic_real_height = this.height; // work for in memory images. });

看一个等比例缩放

代码如下

复制代码

HTML调用部分