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 蒙版进度条(结合图片)
Mar 10 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
js实现移动端轮播图滑动切换
Dec 21 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字符串截取函数用法分析
2014/11/25 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery实现上传图片前预览效果功能
2017/08/03 jQuery
Python中DJANGO简单测试实例
2015/05/11 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python re正则匹配网页中图片url地址的方法
2018/12/20 Python
Pandas分组与排序的实现
2019/07/23 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python实现粒子群算法的示例
2021/02/14 Python
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
商务专员岗位职责
2013/11/23 职场文书
音乐教学案例
2014/01/30 职场文书
运动会广播稿20字
2014/02/18 职场文书
继承权公证书范本
2015/01/23 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers
Javascript webpack动态import
2022/04/19 Javascript
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python