http://blog.phpdr.net/js-get-image-size.html

lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果)。javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它。

这是大部分人使用预加载获取图片大小的例子:

01 var imgLoad = function (url, callback) {
02     var img = new Image();
03  
04     img.src = url;
05     if (img.complete) {
06         callback(img.width, img.height);
07     else {
08         img.onload = function () {
09             callback(img.width, img.height);
10             img.onload = null;
11         };
12     };
13  
14 };

可以看到上面必须等待图片加载完毕才能获取尺寸,其速度不敢恭维,我们需要改进。

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且不需要预设width与height属性,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

当然实际中会有一些兼容陷阱,如width与height检测各个浏览器的不一致,还有webkit new Image()建立的图片会受以处在加载进程中同url图片影响,经过反复测试后的最佳处理方式:

01 // 更新:
02 // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
03 // 04-02: 1、增加图片完全加载后的回调 2、提高性能
04  
05 /**
06  * 图片头数据加载就绪事件 - 更快获取图片尺寸
07  * @version 2011.05.27
09  * @param   {String}    图片路径
10  * @param   {Function}  尺寸就绪
11  * @param   {Function}  加载完毕 (可选)
12  * @param   {Function}  加载错误 (可选)
13  * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
14         alert('size ready: width=' + this.width + '; height=' + this.height);
15     });
16  */
17 var imgReady = (function () {
18     var list = [], intervalId = null,
19  
20     // 用来执行队列
21     tick = function () {
22         var i = 0;
23         for (; i < list.length; i++) {
24             list[i].end ? list.splice(i--, 1) : list[i]();
25         };
26         !list.length && stop();
27     },
28  
29     // 停止所有定时器队列
30     stop = function () {
31         clearInterval(intervalId);
32         intervalId = null;
33     };
34  
35     return function (url, ready, load, error) {
36         var onready, width, height, newWidth, newHeight,
37             img = new Image();
38  
39         img.src = url;
40  
41         // 如果图片被缓存,则直接返回缓存数据
42         if (img.complete) {
43             ready.call(img);
44             load && load.call(img);
45             return;
46         };
47  
48         width = img.width;
49         height = img.height;
50  
51         // 加载错误后的事件
52         img.onerror = function () {
53             error && error.call(img);
54             onready.end = true;
55             img = img.onload = img.onerror = null;
56         };
57  
58         // 图片尺寸就绪
59         onready = function () {
60             newWidth = img.width;
61             newHeight = img.height;
62             if (newWidth !== width || newHeight !== height ||
63                 // 如果图片已经在其他地方加载可使用面积检测
64                 newWidth * newHeight > 1024
65             ) {
66                 ready.call(img);
67                 onready.end = true;
68             };
69         };
70         onready();
71  
72         // 完全加载完毕的事件
73         img.onload = function () {
74             // onload在定时器时间差范围内可能比onready快
75             // 这里进行检查并保证onready优先执行
76             !onready.end && onready();
77  
78             load && load.call(img);
79  
80             // IE gif动画会循环执行onload,置空onload即可
81             img = img.onload = img.onerror = null;
82         };
83  
84         // 加入队列中定期执行
85         if (!onready.end) {
86             list.push(onready);
87             // 无论何时只允许出现一个定时器,减少浏览器性能损耗
88             if (intervalId === null) intervalId = setInterval(tick, 40);
89         };
90     };
91 })();

调用例子:

2     alert('size ready: width=' this.width + '; height=' this.height);
3 });

Demo

(通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)

转自 http://www.planeart.cn/?p=1121

[转]js动态获取图片长宽尺寸的更多相关文章

  1. 转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

    转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...

  2. JQuery图片延迟加载插件,动态获取图片长宽尺寸

    以前的网站带宽小,没有特别多的大图,现在不同了,各种图片网站如同雨后春笋层出不穷.服务器是抗住了,但是客户端就有意见了,太多的图片必然导致页面加载缓慢,特别是有些table结构的站点更是如此.能否让图 ...

  3. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. js获取图片信息(一)-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  5. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  6. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  7. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  9. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

随机推荐

  1. 在Egret实现二维码长按识别

      Egret中二维码图片,是在canvas上,无法在微信上长按扫描识别. 由于微信长按识别二维码是截屏扫描原理,所以只要长按当前屏幕任意一张图片,都能够识别当前屏幕上的二维码. 这里把二维码放在ex ...

  2. Mysql忘记用户密码的解决办法

    1.1 忘记用户密码的解决办法 普通用户,直接用root超级管理员登录进去修改密码就可以了,但是如果root密码丢失了,怎么办呢? 1.1.1 msyqld_saft方式找回密码 停止mysql:se ...

  3. XidianOJ 1183 Water Problem: Items divided

    题目描述 Youyouyouyou is very interested in math, one day, an idea came into his mind that how many ways ...

  4. Python学习笔记(四)字符串型

    字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串. 在最新的Python 3版本中,字符串是以Unicode编码的,也就是说,Python的字符串支持多语言 ...

  5. 【转】常用css命名规则

    常用的css命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...

  6. _Dispose(typeinfo,pointer ); 不知道说的是什么? 感觉会有用, 留待以后研究

        [传说]晓不得2013(26562729)  16:45:41别人把文章发出来,说明就是验证过的.[潜水]ひㄨㄨ那个ㄨㄨ(1548253108)  16:46:23[潜水]ひㄨㄨ那个ㄨㄨ(15 ...

  7. 表格制作模块xlwt

    import xlwtworkbook = xlwt.Workbook(encoding = 'ascii') #创建workbook 括号内容视情况而定sheetname = 'Sheet'book ...

  8. 【微博SDK调用逻辑】微博SDK的调用逻辑,最好自己还是写一个例子,试一下!!!

    逻辑是这样的,谢谢给我讲东西的开发哥哥,嘻嘻~~~  1.点击微博登录,SDK会打开微博客户端,然后点击登陆(如果已经登录了会出现一个当前app跟微博交互的图片界面,然后提示“正在获取授权信息”,如果 ...

  9. 安装crab

    1. crab 介绍: Recommender systems in Python 官网介绍:http://muricoca.github.io/crab/ 在安装过程中,发现一个问题,我已经安装了A ...

  10. C++和C#混合编程

    最近需要利用C++和C#混合编程,然后就写了一个C#调用C++生成的DLL的DEMO.困扰我好久的就是C#中string类型在C++里面怎么表达,现在把C++生成DLL供C#调用的流程写出来. 源码: ...