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

转自: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
08  * @see     http://blog.phpdr.net/js-get-image-size.html
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 })();

调用例子:

1 imgReady(http://www.google.com.hk/intl/zh-CN/images/logo_cn.pngfunction () {
2     alert(‘size ready: width=‘ this.width + ‘; height=‘ this.height);
3 });

Demo

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

时间: 2024-12-17 18:16:44

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

[转]js动态获取图片长宽尺寸

http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img = ne

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

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一步进入这个过程. 一.简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.par

写个js动态调整图片宽高 (原创)

<body style="TEXT-ALIGN: center;"> <div id="testID" style="background:red;MARGIN-RIGHT: auto; MARGIN-LEFT: auto; width:173;height:184"> <img src="http://e.hiphotos.baidu.com/image/pic/item/024f78f0f736afc3

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

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器.一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new I

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

通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg" id="test" width="250px"

Js动态获取iframe子页面的高度总结

问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度 涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用document.documentElement.scrollHeight(兼容ie6 ie7)|

根据图片的链接获取图片的宽高

//根据图片的链接获取图片的宽高 - (CGSize)downloadImageSizeWithURL:(id)imageURL { NSURL *URL = nil; if([imageURL isKindOfClass:[NSURL class]]){ URL = imageURL; } if([imageURL isKindOfClass:[NSString class]]){ URL = [NSURL URLWithString:imageURL]; } if(URL == nil) r

java 获取图片大小(尺寸)

1,获取本地图片大小(尺寸) File picture=new File(strSrc);BufferedImage sourceImg=ImageIO.read(new FileInputStream(picture)); sourceImg.getWidth(); sourceImg.getHeight(); 2,获取网络图片大小(尺寸) BufferedImage sourceImg=ImageIO.read(new URL(strSrc).openStream()); sourceImg

Android中获取图片的宽和高

在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory.decodeResource(getResources(), R.drawable.photo3); //创建副本 //1.创建与原图一模一样大小的bitmap对象,该对象中目前是没有内容的,可以比喻为创建了和原图一样大小 //的白纸 Bitmap bmCopy = Bitmap.createBit