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 |
})(); |
调用例子:
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 |
}); |
相关推荐
效果描述: 目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载完毕后才开始获取,用户体验极其不好,... 2、示例中有一个获取图片尺寸的方法,将其中的图片url地址换成你的即可
在JavaScript和jQuery中获取图片的长宽通常是一个简单的任务,但在不同的浏览器环境下,实现方式可能存在差异。这个问题主要集中在Chrome浏览器上,尽管在IE和Firefox中能够正常获取,但在Chrome中可能会遇到问题。...
在JavaScript编程中,获取网页的宽高是一项常见的需求,特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要...
在C++编程中,获取JPEG图片的尺寸是一项常见的任务,特别是在图像处理或图形用户界面的应用中。JPEG(Joint Photographic Experts Group)是一种广泛使用的有损压缩图像格式,它能够有效地减少图片的存储空间。要...
本文将深入探讨一个JavaScript函数,该函数能够确保在网页上加载的图片能够根据容器大小自动调整其尺寸,同时保持原始的长宽比例不变,从而避免图片在显示过程中出现变形或拉伸的情况。 #### 函数定义与参数说明 此...
本项目“获取对应打印机纸张长宽的C#类”是专门为开发者设计的一个实用工具,它允许程序获取打印机支持的纸张尺寸,以便在打印过程中进行精确的页面布局。这个类库适用于Visual Studio 2012开发环境,且已编译为.NET...
液晶屏幕尺寸计算excel,方便查阅,自动计算长宽比
不用IE控件(ActiveXObject)不用 Img属性 上传图片客户端判断大小,javascript获得上传图片的大小 兼容所有浏览器,亲测可用 判断文件大小,判断上传图片的大小,图片格式
不需要加载整个图像,即可获得图片的宽高信息
图片上传前进行长宽验证是必要的步骤,它确保上传的图片尺寸符合网站或应用的规范。这不仅可以防止因尺寸过大或过小造成的图片显示问题,还可以避免因为异常尺寸的图片上传造成的服务器资源浪费或性能问题。 #### 8...
### JavaScript 获取图片尺寸的方法 在Web开发中,经常需要动态获取图片的尺寸信息,以便进行页面布局调整或响应式设计。下面将详细介绍如何利用JavaScript来获取图片的长度(宽度)和高度。 #### 1. 基本原理 在...
首先,最直接的方法是通过访问DOM元素的style属性来获取图片尺寸。当图片的宽度在HTML标签内直接定义为style属性时,可以通过obj.style.width或obj.style.height获取到其值。例如: ```javascript var imgWidth = ...
同时,要确保在实际应用中考虑到浏览器兼容性和性能优化,如使用`window.onload`或`DOMContentLoaded`事件来确保图片已加载完毕再进行调整。 总之,JavaScript为我们在网页上实现图片等比输出提供了强大的工具。...
它的主要功能是对网页上的图片和元素进行实时测量,帮助用户获取像素级别的尺寸数据。这对于精确调整布局、间距、图像大小等工作来说非常方便。 在实际应用中,这款工具可能包含以下特性: 1. 直观的尺子界面:...
在C#编程中,获取图片、音乐和视频的详细信息是一项常见的任务,这对于多媒体应用的开发至关重要。本文将深入探讨如何使用C#有效地获取这些元数据,并解释如何确定音乐和视频的播放时间长度。 首先,让我们关注图片...
这段JS代码首先获取div容器和图片元素的当前宽度和高度,然后根据图片的自然宽高比(`naturalWidth`和`naturalHeight`属性)计算出合适的尺寸。如果图片的高度超过了容器高度,就反过来调整宽度,确保图片始终适应...
不同的用途对图片尺寸有不同的要求,例如网页设计可能需要较小尺寸的图片以减少加载时间,而印刷业则可能需要高分辨率的大尺寸图片以保证质量。该工具通过读取图片的元数据,获取其实际尺寸,然后根据用户设定的规则...
如果需要在JavaScript中动态调整图片尺寸,可以使用以下方法。假设我们有一个图片元素`<img id="targetImg" src="1.jpg">`,我们可以获取到图片的自然尺寸,并根据目标尺寸进行缩放: ```javascript let img = ...
### kindEditor4.1 版本中实现图片自适应的方法 ...关键是利用宽度的百分比计算来动态调整图片的大小,并且避免硬编码图片的高度,以保持图片的比例不变。这些修改不仅提高了用户体验,还增强了应用的兼容性和响应性。
在Android开发中,从网络获取图片资源并进行显示、缩放和触摸操作是常见的需求。以下将详细讲解这个过程中的关键技术点。 首先,从网络异步加载图片资源是为了避免阻塞主线程,确保用户界面(UI)的流畅性。Android...