 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 仿迅雷图片被动加载效果的实现 |
| 来源：源码爱好者 更新时间：2011/5/14 8:31:36 阅读次数： 我要投稿 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>图片被动加载的实现</title>
</head>
<body>
<script type="text/javascript">
/**
* Javascript Image Delay load
* @author Eric,<wangyinglei@yeah.net>,QQ:31301678
* @copyright Quanying Network Inc. 2010
* @TODO x轴滚动加载功能未被实现
*/
//闭包防止变量冲突
(function(){
//预定义变量，减小代码体积
var _ = document,
A = _.compatMode,
B = _.body,
C = _.documentElement;
//Constructor
function AimoLoad(e){
//要处理的包含延迟加载图片的容器
this.area = e ? this.get(e) : _;
//需要延迟加载的所有图片对象
this.imgs = [];
//执行判断 条件成立 载入图片
this.run();
}
//扩展原型链（注册类其他方法）
AimoLoad.prototype = {
//获取DOM元素，仅支持ID
'get' : function(e){
return typeof(e)=='string' ? _.getElementById(e) : e;
},
//获取所有需要被动载入的图片集合
'getImages' : function(){
var i = 0,
imgs = this.area.getElementsByTagName('img'),
l = imgs.length;
for ( ; i < l; i++) {
//过滤带有bigsrc属性的所有图片
if(imgs[i].getAttribute('bigsrc')){
this.imgs.push(imgs[i]);
}
}
},
//获取元素位置坐标
'getPosition' : function(el){
var x = 0, y = 0;;
if (el.getBoundingClientRect) {
var box = el.getBoundingClientRect(),
el = (A != "CSS1Compat") ?
_.body : C;
x = box.left + el.scrollLeft - el.clientLeft;
y = box.top + el.scrollTop - el.clientTop;
} else {
x = el.offsetLeft;
y = el.offsetTop;
var parent = el.offsetParent;
while (parent) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
}
return {'x' : x, 'y' : y};
},
//封装判断变量是否定义
'defined' : function(o){
return (typeof(o)!="undefined");
},
//封装合法化Int变量
'zeroFix' : function(n){
return (!this.defined(n) || isNaN(n))? 0 : n;
},
//获取可视部分高度
'getVisibileHeight' : function(){
var cm = C && (!A || A=="CSS1Compat");
if (!window.opera && cm) {
return C.clientHeight;
}else if (A && !window.opera && B) {
return B.clientHeight;
}
return this.zeroFix(self.innerHeight);
},
//获取垂直滚动条位置
'getScrollTop' : function(){
if (C && this.defined(C.scrollTop) && C.scrollTop>0) {
return C.scrollTop;
}
if (B && this.defined(B.scrollTop)) {
return B.scrollTop;
}
return 0;
},
//执行主函数
'run' : function(){
//获取其他脚本注册到window上的onscroll和onresize事件，避免冲突
var _resize = window.onresize || function(){},
_scroll = window.onscroll || function(){},
//引用自身，另存this指向
_self = this,
//定义注册函数
delayLoad = function(){
//清空前一次获取的所有图片
_self.imgs = [];
//获取当前未载入的图片
_self.getImages();
//如果已经没有被动载入的图片了，那么释放注册的事件，提高性能，节省内存
if(_self.imgs.length==0){
window.onscroll = function(){
_scroll();
};
window.onresize = function(){
_resize();
};
//alert('清除事件');
return;
}
var i = 0,
m = _self.imgs,
l = _self.imgs.length,
y = _self.getVisibileHeight(),
t = _self.getScrollTop();
//遍历所有需要被动载入的图片
for( ; i < l; i++){
//闭包保证i变量
(function(i){
//获取每个图像对象的坐标
var pos = _self.getPosition(m[i]);
//如果图片出现在可视区域内
if(t + y > pos.y){
//读取bigsrc属性，替换当前src属性
m[i].setAttribute('src', m[i].getAttribute('bigsrc'));
//删除bigsrc属性，提高性能
m[i].removeAttribute('bigsrc');
}
})(i);//闭包结束
}//循环结束
};//定义注册函数结束
//注册函数到window scroll事件
window.onscroll = function(){
_scroll();//执行其他脚本注册到当前事件的函数
delayLoad();
};
//注册函数到window resize事件
window.onresize = function(){
_resize();//执行其他脚本注册到当前事件的函数
delayLoad();
};
}
}
//暴露接口到外部，以便调用
window.AimoLoad = AimoLoad;
})();
</script>
<div id="df" align="center">
<div style="height:300px;"></div>
<div><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051408475791.gif" width="200" bigsrc="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582652.jpg" /></div>
<div style="height:300px;"></div>
<div><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051408475791.gif" width="200" bigsrc="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582644.jpg" /></div>
<div style="height:300px;"></div>
<div><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051408475791.gif" width="200" bigsrc="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582622.jpg" /></div>
<div style="height:300px;"></div>
<div><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201105/2011051408475791.gif" width="200" bigsrc="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582661.jpg" /></div>
</div>
<script type="text/javascript">
new AimoLoad();
</script>
</body>
</html> |
| 特效说明： |
Javascript实现的页面图片被动加载类，在使用前用1像素图像进行占位，并给img tag 添加 自定义bigsrc属性 ，当有图片进入可视区域内时，载入图片，提高页面载入速度，节省不必要的流量和连接数，x轴滚动加载功能未被实现。主函数获取其他脚本注册到window上的onscroll和onresize事件，避免冲突。
本代码在IE6 firefox3.6 Firefox4.0 chrome opera 11.10中测试通过。
被动加载的意义：
当用户拖动滚动条，如果此时网页有图片的话开始加载，并不是拖不拖滚动条都先把图片加载完。这样做的好处：
1.加快页面载入速度，提高用户体验，首页图片较多的页面尤其明显。
2.节省流量和服务器连接数 |
|
| 上一篇文章： 仿腾讯网可控制左右平滑滚动的图片切换效果下一篇文章： jQuery 图片拉伸放大效果 |
|
|
|
注册 登录
