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 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
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项目打包方法
2008/02/18 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php MessagePack介绍
2013/10/06 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
基于Python闭包及其作用域详解
2017/08/28 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
优秀应届本科生求职信
2014/07/19 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
党员个人自我评价
2015/03/03 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python
SQL SERVER中的流程控制语句
2022/05/25 SQL Server