`

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

阅读更多

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
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 });
 
分享到:
评论

相关推荐

    在图片加载完毕前js获取图片长宽尺寸

    效果描述: 目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载完毕后才开始获取,用户体验极其不好,... 2、示例中有一个获取图片尺寸的方法,将其中的图片url地址换成你的即可

    jquery在Chrome下获取图片的长宽问题解决

    在JavaScript和jQuery中获取图片的长宽通常是一个简单的任务,但在不同的浏览器环境下,实现方式可能存在差异。这个问题主要集中在Chrome浏览器上,尽管在IE和Firefox中能够正常获取,但在Chrome中可能会遇到问题。...

    js获取网页宽高

    在JavaScript编程中,获取网页的宽高是一项常见的需求,特别是在页面布局、动态调整元素尺寸或者进行响应式设计时。本文将深入探讨如何利用JavaScript来获取浏览器窗口以及网页内容的宽度和高度。 首先,我们需要...

    c++获取jpg图片的尺寸

    在C++编程中,获取JPEG图片的尺寸是一项常见的任务,特别是在图像处理或图形用户界面的应用中。JPEG(Joint Photographic Experts Group)是一种广泛使用的有损压缩图像格式,它能够有效地减少图片的存储空间。要...

    javascript 写的一个图片自动适应长宽比列的函数

    本文将深入探讨一个JavaScript函数,该函数能够确保在网页上加载的图片能够根据容器大小自动调整其尺寸,同时保持原始的长宽比例不变,从而避免图片在显示过程中出现变形或拉伸的情况。 #### 函数定义与参数说明 此...

    获取对应打印机纸张长宽的C#类

    本项目“获取对应打印机纸张长宽的C#类”是专门为开发者设计的一个实用工具,它允许程序获取打印机支持的纸张尺寸,以便在打印过程中进行精确的页面布局。这个类库适用于Visual Studio 2012开发环境,且已编译为.NET...

    屏幕尺寸长宽计算表

    液晶屏幕尺寸计算excel,方便查阅,自动计算长宽比

    上传图片客户端判断大小,javascript获得上传图片的大小

    不用IE控件(ActiveXObject)不用 Img属性 上传图片客户端判断大小,javascript获得上传图片的大小 兼容所有浏览器,亲测可用 判断文件大小,判断上传图片的大小,图片格式

    C# 快速获取图片的宽高

    不需要加载整个图像,即可获得图片的宽高信息

    js 图片上传前大小长宽验证代码

    图片上传前进行长宽验证是必要的步骤,它确保上传的图片尺寸符合网站或应用的规范。这不仅可以防止因尺寸过大或过小造成的图片显示问题,还可以避免因为异常尺寸的图片上传造成的服务器资源浪费或性能问题。 #### 8...

    js获取图片长和宽度的代码

    ### JavaScript 获取图片尺寸的方法 在Web开发中,经常需要动态获取图片的尺寸信息,以便进行页面布局调整或响应式设计。下面将详细介绍如何利用JavaScript来获取图片的长度(宽度)和高度。 #### 1. 基本原理 在...

    JS获取IMG图片高宽的简单实例

    首先,最直接的方法是通过访问DOM元素的style属性来获取图片尺寸。当图片的宽度在HTML标签内直接定义为style属性时,可以通过obj.style.width或obj.style.height获取到其值。例如: ```javascript var imgWidth = ...

    js控制图片等比输出

    同时,要确保在实际应用中考虑到浏览器兼容性和性能优化,如使用`window.onload`或`DOMContentLoaded`事件来确保图片已加载完毕再进行调整。 总之,JavaScript为我们在网页上实现图片等比输出提供了强大的工具。...

    c#获取图片详细信息,音乐以及视频播放时间长度

    在C#编程中,获取图片、音乐和视频的详细信息是一项常见的任务,这对于多媒体应用的开发至关重要。本文将深入探讨如何使用C#有效地获取这些元数据,并解释如何确定音乐和视频的播放时间长度。 首先,让我们关注图片...

    前端UI测量图片网页长宽工具

    它的主要功能是对网页上的图片和元素进行实时测量,帮助用户获取像素级别的尺寸数据。这对于精确调整布局、间距、图像大小等工作来说非常方便。 在实际应用中,这款工具可能包含以下特性: 1. 直观的尺子界面:...

    通过JS自动调整图片的大小以适应div的高和宽

    这段JS代码首先获取div容器和图片元素的当前宽度和高度,然后根据图片的自然宽高比(`naturalWidth`和`naturalHeight`属性)计算出合适的尺寸。如果图片的高度超过了容器高度,就反过来调整宽度,确保图片始终适应...

    图片按尺寸大小分类工具

    不同的用途对图片尺寸有不同的要求,例如网页设计可能需要较小尺寸的图片以减少加载时间,而印刷业则可能需要高分辨率的大尺寸图片以保证质量。该工具通过读取图片的元数据,获取其实际尺寸,然后根据用户设定的规则...

    网页图片自动按照比例缩放到指定大小

    如果需要在JavaScript中动态调整图片尺寸,可以使用以下方法。假设我们有一个图片元素`&lt;img id="targetImg" src="1.jpg"&gt;`,我们可以获取到图片的自然尺寸,并根据目标尺寸进行缩放: ```javascript let img = ...

    android从网络获取图片资源,图片放大、缩小、触摸等操作。

    在Android开发中,从网络获取图片资源并进行显示、缩放和触摸操作是常见的需求。以下将详细讲解这个过程中的关键技术点。 首先,从网络异步加载图片资源是为了避免阻塞主线程,确保用户界面(UI)的流畅性。Android...

    js图片压缩

    等比例压缩是保持图片长宽比不变,调整图片尺寸的过程。这是为了避免压缩后图片变形。在JavaScript中,我们可以先获取原始图片的宽度和高度,然后根据目标尺寸计算缩放比例,最后用这个比例来调整图片大小。 三、...

Global site tag (gtag.js) - Google Analytics