Warning: session_start(): open(/tmp/sess_a5hbdeqq7arhovrle2ou6oj024, O_RDWR) failed: Disk quota exceeded (122) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/tensungn/public_html/www.tzlink.com/info/show.php:8) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/tensungn/public_html/www.tzlink.com/info/show.php:8) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8
再谈javascript图片预加载技术 - JavaScript/JQuery编程 - 站长之家

热烈祝贺台州维博网络的站长论坛隆重上线!(2012-05-28)    热烈庆祝伟大的祖国60周年生日 点击进来我们一起为她祝福吧(2009-09-26)    站长论坛禁止发布广告,一经发现立即删除。谢谢各位合作!.(2009-08-08)    热烈祝贺台州网址导航全面升级,全新版本上线!希望各位一如既往地支持台州网址导航的发展.(2009-03-28)    台州站长论坛恭祝各位新年快乐,牛年行大运!(2009-01-24)    台州Link正式更名为台州网址导航,专业做以台州网址为主的网址导航!(2008-05-23)    热烈祝贺台州Link资讯改名为中国站长资讯!希望在以后日子里得到大家的大力支持和帮助!(2008-04-10)    热烈祝贺台州Link论坛改名为台州站长论坛!希望大家继续支持和鼓励!(2008-04-10)    台州站长论坛原[社会琐碎]版块更名为[生活百科]版块!(2007-09-05)    特此通知:新台州站长论坛的数据信息全部升级成功!">特此通知:新台州站长论坛的数据信息全部升级成功!(2007-09-01)    台州站长论坛对未通过验证的会员进行合理的清除,请您谅解(2007-08-30)    台州网址导航|上网导航诚邀世界各地的网站友情链接和友谊联盟,共同引领网站导航、前进!(2007-08-30)    禁止发广告之类的帖,已发现立即删除!(2007-08-30)    希望各位上传与下载有用资源和最新信息(2007-08-30)    热烈祝贺台州站长论坛全面升级成功,全新上线!(2007-08-30)    
便民网址导航,轻松网上冲浪。
台州维博网络专业开发网站门户平台系统
您当前的位置: 首页 » JavaScript/JQuery编程 » 再谈javascript图片预加载技术

再谈javascript图片预加载技术

论坛链接
  • 再谈javascript图片预加载技术
  • 发布时间:2011-03-11 12:44:14    浏览数:7790    发布者:tzlink    设置字体【   
由于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;
};
};

};highlight: php可以看到使用onload的方式必须等待图片加载完毕,其速度不敢恭维。

web应用程序区别于桌面应用程序,响应速度才是最好的用户体验。如果想要速度与优雅兼得,那就必须提前获得图片尺寸,如何在图片没有加载完毕就能获取图片尺寸?

十多年的上网经验告诉我:浏览器在加载图片的时候你会看到图片会先占用一块地然后才慢慢加载完毕,并且这里大部分的图片都是没有预设width与height属性的,因为浏览器能够获取图片的头部数据。基于此,只需要使用javascript定时侦测图片的尺寸状态便可得知图片尺寸就绪的状态。

实现代码:

/*!
* img ready
* http://www.planeart.cn/?p=1121
* TangBin - MIT Licensed
*/

// @param {String} 图片路径
// @param {Function} 获取尺寸的回调函数 (参数1接收width;参数2接收height)
// @param {Function} 加载错误的回调函数 (可选)
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 () {
// 如果图像尺寸开始变化,则表示浏览器已经获取了图片头数据并占位
// 经过实测只有监听img.offsetWidth才有效,而img.offsetHeight是为了保险
if (img.offsetWidth !== width || img.offsetHeight !== height) {
clearInterval(intervalId);
callback(img.offsetWidth, img.offsetHeight);
// 清空img的事件与元素,避免IE内存泄漏
img.onload = null;
div.innerHTML = '';
div.parentNode.removeChild(div);
};
};

// 定期执行检测
intervalId = setInterval(check, 150);
};

// 等待图片完全加载完毕
// 这是一个保险操作,如果上面的监听尺寸方法失败则会启用此
// 如果很小的图像有可能加载时间小于定时器定义的检测间隔时间,则会停止定时器
img.onload = function () {
clearInterval(intervalId);
callback(img.width, img.height);
img.onload = img.onerror = null;
body && img.parentNode.removeChild(img);
};

// 图像加载错误
img.onerror = function () {
error && error();
clearInterval(intervalId);
body && img.parentNode.removeChild(img);
};

};highlight: php是不是很简单?这样的方式获取摄影级别照片尺寸的速度往往是onload方式的几十多倍,而对于web普通(800×600内)浏览级别的图片能达到秒杀效果。

好了,请观赏令人愉悦的 DEMO : http://www.planeart.cn/demo/imgReady/

(通过测试的浏览器:Chrome、Firefox、Safari、Opera、IE6、IE7、IE8)
娱乐休闲专区A 影视预告B 音乐咖啡C 英语阶梯D 生活百科
网页编程专区E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技术区 N 系统管理O 服务器架设P 网络/硬件Q 编程序开发R 内核/嵌入
管理中心专区S 发布网址T 版主议事U 事务处理

Warning: Unknown: open(/tmp/sess_a5hbdeqq7arhovrle2ou6oj024, O_RDWR) failed: Disk quota exceeded (122) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0