htmlload图加载完成闪一下 如何实现lazyload的图片延迟加载功能(1/2)

如何实现lazyload的图片延迟加载功能(1/2)  

如何实现lazyload的图片延迟加载功能lazyload的难点在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域) 因此我们需要知道几点信息来确定目标是否已呈现在客户区 其中包括  　　　　 可视区域相对于浏览器顶端位置 　　　　 待加载资源相对于浏览器顶端位置

 　　在得到以上两点数据后 通过如下函数 便可得出某对象是否在浏览器可视区域了   　　//返回浏览器的可视区域位置 　　

function getclient(){  　　　　 var l t w h;  　　　　 l  =  document documentelement scrollleft || document body scrollleft;  　　　　 t  =  document documentelement scrolltop || document body scrolltop;  　　　　 w =   document documentelement clienidth;  　　　　 h =   document documentelement clientheight;  　　　　 return { left :l top :t width :w height :h} ; 　　 }

  　　//返回待

加载资源位置 　　

function getsubclient(p){ 　　　　  var l = t = w h;  　　　　 w = p offseidth ;  　　　　 h = p offsetheight;

   　　　　while(p offsetparent){    　　　　l += p offsetleft ;  　　　　  t += p offsettop ;   　　　　 p = p offsetparent;   　　}

   　　return { left :l top :t width :w height :h } ;  }

  　　其中 函数 getclient()返回浏览器客户区区域信息 getsubclient()返回目标模块区域信息 此时确定目标模块是否出现在客户区实际上是确定如上两个矩形是否相交

  　　//判断两个矩形是否相交 返回一个布尔值 　　

function intens(rec rec ){  　　　　 var lc lc tc tc w h ;  　　　　 lc = rec left + rec width / ; 　　　　  lc = rec left + rec width / ;   　　　　tc = rec top + rec height / ;  　　　　 tc = rec top + rec height / ;  　　　　 w = (rec width + rec width) / ;　　　　   h = (rec height + rec height) / ;  　　　　 return math abs(lc lc ) < w && math abs(tc tc ) < h ; 　　 }