js获取图片宽高的方法


Posted in Javascript onNovember 25, 2015

本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获。

一、简陋的获取图片方式

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

 结果如下:

js获取图片宽高的方法

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

二、onload后在打印

// 图片地址 后面加时间戳是为了避免缓存
var img_url = 'upload/2013/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);
};

 结果如下

js获取图片宽高的方法

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

三、通过complete与onload一起混合使用
为了测试缓存效果,注意以下测试图片的url都不加时间戳

// 图片地址
var img_url = 'upload/2013/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);
 };
}

 第一次执行,永远是onload触发

js获取图片宽高的方法

你再刷新,几乎都是缓存触发

js获取图片宽高的方法

从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。我们常常知道有些图片虽然没有完全down下来,但是已经先有占位符,然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的。可服务器什么时候响应并返回宽高的数据没有触发事件,比如onload事件。于是催生了第四种方法

四、通过定时循环检测获取
看看以下例子,为了避免从缓存里读取数据,每一次请求都带时间戳:

// 图片地址
var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date());
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+'
';
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 document.body.innerHTML += '
from:onload : width:'+img.width+',height:'+img.height+'
';
 
 // 取消定时获取宽高
 clearInterval(set);
};

 FireFox

js获取图片宽高的方法

IE7 8 9 10

js获取图片宽高的方法

Chrome

js获取图片宽高的方法

通过以上测试,我们发现定时检测图片宽高的方式要比onload快多了,打印的行数越多表示onload时间越长,40毫秒执行一次,基本100毫秒内就能获取图片的宽高,chrome甚至在第一次循环的时候就已经获得数据。从以上数据来分析,其实我们可以在定时函数里判断只要图片的宽高都大于0就表示已经获得正确的图片宽高。我们把时间打上,来看看通过定时获取宽高或者onload获取宽高所需要多少时间。

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
 if(img.width>0 || img.height>0){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
';
 clearInterval(set);
 }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
};

 FireFox:

js获取图片宽高的方法

IE

js获取图片宽高的方法

Chrome

js获取图片宽高的方法

这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片宽高非常实用。

通过大量实例分析比较了js获取图片宽高各种方法的优劣,希望大家根据需要认真取舍。

Javascript 相关文章推荐
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
【经典源码收藏】基于jQuery的项目常见函数封装集合
Jun 07 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
node.js的事件机制
Feb 08 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
angular4自定义组件详解
Sep 28 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue中实现动态生成二维码的方法
Feb 21 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 #Javascript
javascript常用经典算法实例详解
Nov 25 #Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 #Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 #Javascript
JavaScript编写简单的计算器
Nov 25 #Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 #Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 #Javascript
You might like
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP速成大法
2015/01/30 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Pytorch之保存读取模型实例
2019/12/30 Python
python使用列表的最佳方案
2020/08/12 Python
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
幼儿园教师读书笔记
2015/06/29 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android