|
如何实现lazyload的图片延迟加载功能
lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)因此我们需要知道几点信息来确定目标是否已呈现在客户区其中包括
可视区域相对于浏览器顶端位置
待加载资源相对于浏览器顶端位置 在得到以上两点数据后通过如下函数便可得出某对象是否在浏览器可视区域了
//返回浏览器的可视区域位置
function getclient(){
var ltwh;
l = documentdocumentelementscrollleft || documentbodyscrollleft;
t = documentdocumentelementscrolltop || documentbodyscrolltop;
w = documentdocumentelementclientwidth;
h = documentdocumentelementclientheight;
return {left:ltop:twidth:wheight:h} ;
} //返回待
加载资源位置
function getsubclient(p){
var l = t = wh;
w = poffsetwidth ;
h = poffsetheight; while(poffsetparent){
l += poffsetleft ;
t += poffsettop ;
p = poffsetparent;
} return {left:ltop:twidth:wheight:h } ;
}
其中 函数 getclient()返回浏览器客户区区域信息getsubclient()返回目标模块区域信息此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交 //判断两个矩形是否相交返回一个布尔值
function intens(recrec){
var lclctctcwh;
lc = recleft + recwidth / ;
lc = recleft + recwidth / ;
tc = rectop + recheight / ;
tc = rectop + recheight / ;
w = (recwidth + recwidth) / ;
h = (recheight + recheight) / ;
return mathabs(lc lc) < w && mathabs(tc tc) < h ;
} |
