再谈javascript图片预加载技术
发布时间:2011-03-11 19:57:00
由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。
一段典型的使用预加载获取图片大小的例子:
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。
web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?
十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码:
var imgReady = function (url, callback, error) {
var width, height, intervalId, check, div,
img = new Image(),
body = document.body;
img.src = url;
// 从缓存中读取
if (img.complete) {
return callback(img.width, img.height);
};
// 通过占位提前获取图片头部数据
if (body) {
div = document.createElement('div');
div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
div.appendChild(img)
body.appendChild(div);
width = img.offsetWidth;
height = img.offsetHeight;
check = function () {
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.clientHeight);
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};
intervalId = setInterval(check, 150);
};
// 加载完毕后方式获取
img.onload = function () {
callback(img.width, img.height);
img.onload = img.onerror = null;
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
// 图片加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};
};
是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。
好了,请观赏令人愉悦的 DEMO ,通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8。
(planeArt.cn原创文章,原文地址。)
猜你喜欢
- 注释:在大多数的情况下,修改MySQL是需要有mysql里的root权限的,所以一般用户无法更改密码,除非请求管理员。方法1使用phpmya
- 近日,被同事问及一个产品列表的做法怎么实现?一个产品列表,每个产品列表后面跟一个button,这些button居右对齐。其实这个效果跟新闻列
- 2003年以来,网页的平均尺寸已经增长3倍。从2003到2008,网页的平均尺寸从93.7K增至312K,增幅233%。同时,在这5年之内,
- 如何制作一个从Access数据库中读取记录的下拉菜单?看看这个例子:<% SQL = "SEL
- 层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发。你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新
- 如何用ASP输出HTML文件?<!--#include file="top.inc"--><
- 学习WEB标准的朋友一般都是从学习CSS开始,为什么呢?因为CSS是一种很有意思的语言,它能让我们的网页千变万化。也许我们一开始的接触只是因
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- 怎么用javascript进行拖拽本文译自:http://www.webreference.com/programming/javascri
- 前几天光耀童鞋喷了一篇《谈网站注册、登录过程》,今天我们在与小爬童鞋梳理购买流程的时候也谈到了这部分内容。其实注册作为一个网站基本功能再普通
- 今天编ZBlog上传模块的时候,需要用到一个提取文章中文件名的子程,开始我把问题想复杂了,匹配了所有可能的文件名,不仅正则表达
- '================================================ '
- 文件:.wmv;大小:19,535KB;长度:00:26:39。 下载地址:SqlFunction_udf_Week.rar以下内容于201
- 首先恭喜月影,当然希望好书大卖!原文提供了样章下载1.1M,pdf格式的。如果大家想下载可以访问源地址:http://bbs.51js.co
- 前言:书终于完稿了,我也有了一些自己的时间,于是决定将书中讲到的一些比较常见的知识点整理出来,发在Blog里面。当然也不会完全发表出来,毕竟
- 1、从数据库表中检索信息实际上,前面我们已经用到了SELECT语句,它用来从数据库表中检索信息。select语句格式一般为:SELECT 检
- <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
- 对于个人用户来说,除了病毒和木马,网页中的隐形代码也开始严重地威胁着我们的安全,但大多数人却缺乏自我保护意识,对隐形代码的危害认识不够,甚至
- 外观模式(Facade Pattern)是什么外观模式是一种结构型模式,它提供了一个简单的接口,隐藏了系统的复杂性,为客户端提供了一个简单的
- 图片外框特征参数: ①dashed:虚线②dotted:点虚线③solid:实线④double:双线⑤groove:沟