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 中使用JSON的实现代码
Dec 01 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
Feb 29 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
基本DOM节点操作
Jan 17 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 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获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
详细分析python3的reduce函数
2017/12/05 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python通过字典映射函数实现switch
2020/11/06 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
正规的求职信范文分享
2013/12/11 职场文书
企业宣传方案
2014/03/04 职场文书
一分钟演讲稿
2014/04/30 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
篮球赛口号
2014/06/18 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2015年计生协会工作总结
2015/04/24 职场文书