Lazyload 延迟加载效果

Lazyload是通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。
网上也有不少类似的效果,这个Lazyload主要特点是:
支持使用window(窗口)或元素作为容器对象;
对静态(位置大小不变)元素做了大量的优化;
支持垂直、水平或同时两个方向的延迟。


程序说明

【基本原理】

首先要有一个容器对象,容器里面是_elems加载元素集合。
用隐藏或替换等方法,停止元素加载内容。
然后历遍集合元素,当元素在加载范围内,再进行加载。
加载范围一般是容器的视框范围,即浏览者的视觉范围内。
当容器滚动或大小改变时,再重新历遍元素判断。
如此重复,直到所有元素都加载后就完成。

【容器对象】

程序一开始先用_initContainer程序初始化容器对象。
先判断是用window(窗口)还是一般元素作为容器对象:

var doc = document,
isWindow = container == window || container == doc
|| !container.tagName || (/^(?:body|html)$/i).test( container.tagName );
如果是window,再根据文档渲染模式选择对应的文档对象:

if ( isWindow ) {
container = doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
定义好执行方法后,再绑定scroll和resize事件:

this._binder = isWindow ? window : container;

$$E.addEvent( this._binder, "scroll", this.delayLoad );
isWindow && $$E.addEvent( this._binder, "resize", this.delayResize );
如果是window作为容器,需要绑定到window对象上,为了方便移除用了_binder属性来保存绑定对象。

http://www.cnblogs.com/cloudgamer/archive/2010/02/01/LazyLoad.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值