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

Posted 2022-07-18 知

篇首语：技艺是无价之宝，知识是智慧的明灯。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全如何实现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 ; 　　

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

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