获取图片真实大小
来源:互联网 发布:freebsd ubuntu 编辑:程序博客网 时间:2024/04/28 13:18
http://blog.phpdr.net/js-get-image-size.html
js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)
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.png'
,
function
() {
2
alert(
'size ready: width='
+
this
.width +
'; height='
+
this
.height);
3
});
Demo
(通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)
0 0
- 获取图片真实大小
- js获取图片真实大小
- Js获取图片的真实大小
- 根据图片路径来获取图片的真实大小
- 如何用JavaScript获取图片的真实尺寸大小
- jquery 获取图片真实大小的两种方法
- getimagesize() php 获取图片真实类型,大小等
- js获取上传图片真实的尺寸大小和存储大小
- 获取稀疏文件真实大小
- Windows API获取屏幕真实大小
- 获取图片实际大小
- 获取图片的真实宽高
- 从图库获取图片的真实格式
- 获取图片真实的宽度和高度
- webpack获取图片的真实路径
- 拍照后如何得到真实大小的图片
- 获取一张图片的大小
- 获取网络图片的大小
- 微软符号服务器下载符号总结
- Oracle Performance Diagnostic Guide (OPDG) (文档 ID 390374.1)
- Oracle OCP 11G 053 200(206)题 答案解析目录
- Visual Studio 2010 MSDN Library 本地安装方式
- I/O模型
- 获取图片真实大小
- C# 类库从自带的配置文件中获取信息(DLL文件 获取 DLL文件自带的配置信息)
- YII Framework学习教程-YII的Model-开发规范-路径别名-命名空间
- Poj 1274 The Perfect Stall[二分图最大匹配]
- 我用微信公众平台做什么
- 子窗体菜单合并到父窗体菜单的解决办法
- 2013年度Python运维工具
- C#操作符??和?:
- 陈年旧物,皆是歌