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 相关文章推荐
javascript中基本类型和引用类型的区别分析
May 12 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 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 404错误页面实现代码
2009/06/22 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP文件操作详解
2016/12/30 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
javascript 面向对象 function类
2010/05/13 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
Python栈类实例分析
2015/06/15 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
HTML5混合开发二维码扫描以及调用本地摄像头
2017/12/27 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
高一自我鉴定
2013/12/17 职场文书
高中毕业自我评价
2014/02/08 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
初婚未育证明样本
2015/06/18 职场文书