javascript图片预加载技术
由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小,所以lightbox类效果为了让图片居中显示,导致其速度体验要比直接输出的差很多。而本文所提到的预加载技术主要是让javascript快速获取图片头部数据的尺寸。
一段典型的使用预加载获取图片大小的例子:
varimgLoad = function(url, callback) {
varimg = newImage();
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定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。
实现代码:
varimgReady = function(url, callback, error) {
varwidth, height, intervalId, check, div,
img = newImage(),
body = document.body;
img.src = url;
// 从缓存中读取
if(img.complete) {
returncallback(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内)浏览级别的图片能达到秒杀效果。
关键词:javascript
相关阅读
- 07-18MySql5.0 Table错误:is marked as crashed and last (automatic?) repair failed
- 06-25JavaScript下拉菜单实例
- 06-25JavaScript日期格式转换
- 06-25Javascript刷新框架及页面的方法总集
- 06-25javascript节点操作DOMDocument属性和方法
- 03-03microsoft office Enterprise 2007在安装过程中出错怎么办?
- 05-28asp中将相对路径转换为绝对路径的函数
- 05-06home版XP没有gpedit.msc的解决方法
- 05-06gpedit.msc打不开
- 03-14用JavaScript和PHP检测Android设备方法
阅读本文后您有什么感想? 已有 人给出评价!
用户评论
热门评论
最新评论
相关软件
热点图文
- 06-25js中文显示乱码或在页面显示乱码解决方法
- 06-25最简单的方法去掉iframe滚动条
- 06-25JS 获取上传文件大小的方法
- 12-31js技巧之清除表单所有内容
- 06-09网站图片延迟加载的实现
- 06-25JavaScript下拉菜单实例
- 06-25js判断是否是IE浏览器的几种方法
- 12-31W3C中使用的对联漂浮广告代码
- 06-25JavaScript日期格式转换
- 06-25js返回上一页方法示例