JavaScript懒加载技术(lazyload)简单实现

懒加载技术(简称lazyload)并不是新技术, 它是javascript程序员对网页性能优化的一种方案.lazyload的核心是按需加载.在大型网站中都有lazyload的身影,例如谷歌的图片搜索页,迅雷首页，淘宝网,QQ空间等.因此掌握lazyload技术是个不错的选择,可惜jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)称不支持新版浏览器。

1.lazyload在什么场合中应用比较合适?
  涉及到图片，falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽，且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源，让用户等待太久.

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

在得到以上两点数据后，通过如下函数，便可得出某对象是否在浏览器可视区域了.

 
 
 
      
  
  
  1. //返回浏览器的可视区域位置  
    2.   
  
  
  2. 　　 function getClient(){  
    3.   
  
  
  3. 　　　　 var l,t,w,h;  
    4.   
  
  
  4. 　　　　 l = document.documentElement.scrollLeft || document.body.scrollLeft;  
    5.   
  
  
  5. 　　　　 t = document.documentElement.scrollTop || document.body.scrollTop;  
    6.   
  
  
  6. 　　　　 w = document.documentElement.clientWidth;  
    7.   
  
  
  7. 　　　　 h = document.documentElement.clientHeight;  
    8.   
  
  
  8. 　　　　 return {'left':l,'top':t,'width':w,'height':h} ;  
    9.   
  
  
  9. 　　 }  
    10.   
  
  
  10.  
    11.   
  
  
  11. 　　//返回待加载资源位置  
    12.   
  
  
  12. 　　 function getSubClient(p){  
    13.   
  
  
  13. 　　　　 var l = 0,t = 0,w,h;  
    14.   
  
  
  14. 　　　　 w = p.offsetWidth ;  
    15.   
  
  
  15. 　　　　 h = p.offsetHeight;  
    16.   
  
  
  16.  
    17.   
  
  
  17. 　　　　while(p.offsetParent){  
    18.   
  
  
  18. 　　　　l += p.offsetLeft ;  
    19.   
  
  
  19. 　　　　 t += p.offsetTop ;  
    20.   
  
  
  20. 　　　　 p = p.offsetParent;  
    21.   
  
  
  21. 　　}  
    22.   
  
  
  22.  
    23.   
  
  
  23. 　　return {'left':l,'top':t,'width':w,'height':h } ;  
    24.   
  
  
  24. } 
    25.

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

 
 
 
      
  
  
  1. //判断两个矩形是否相交,返回一个布尔值  
    2.   
  
  
  2.  　　 function intens(rec1,rec2){  
    3.   
  
  
  3.   　　　　 var lc1,lc2,tc1,tc2,w1,h1;  
    4.   
  
  
  4.   　　　　 lc1 = rec1.left + rec1.width / 2;  
    5.   
  
  
  5.  　　　　  lc2 = rec2.left + rec2.width / 2;  
    6.   
  
  
  6.    　　　　tc1 = rec1.top + rec1.height / 2 ;  
    7.   
  
  
  7.   　　　　 tc2 = rec2.top + rec2.height / 2 ;  
    8.   
  
  
  8.   　　　　 w1 = (rec1.width + rec2.width) / 2 ;  
    9.   
  
  
  9. 　　　　   h1 = (rec1.height + rec2.height) / 2;  
    10.   
  
  
  10.   　　　　 return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;  
    11.   
  
  
  11.  　　 }  
    12.

现在基本上可以实现延时加载了，接下来,我们在 window.onscroll 事件中编写一些代码监控目标区域是否呈现在客户区.

 
 
 
      
  
  
  1.  "width:100px; height:3000px">  
    2.   
  
  
  2.  　　 "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">  
    3.   
  
  
  3.  　　  
    4.   
  
  
  4.  　　 var d1 = document.getElementById("d1");  
    5.   
  
  
  5.  　　 window.onscroll = function(){  
    6.   
  
  
  6.   　　 　　var prec1 = getClient();   
    7.   
  
  
  7.    　　　　var prec2 =  getSubClient(d1);  
    8.   
  
  
  8.    　　　　　if(intens(prec1,prec2)){  
    9.   
  
  
  9.    　　 　　　　alert("true")  
    10.   
  
  
  10.  　　 　 　　}  
    11.   
  
  
  11.   　　} 
    12.

我们只需要在弹出窗口的地方加载我们需要的资源.
这里值得注意的是:目标对象呈现在客户区域时，会随着滚动而不断的弹出窗口.因此我们需要在弹出第一个窗口后取消对该区域的监测,这里用一个数组来收集需要监测的对象。还需要注意:因为onscroll事件和onresize事件都会改变游览器可视区域信息,因此在该类事件触发后需要重新计算目标对象是否在可视区域,这里用autocheck()函数实现.(迅雷首页的lazyload没有在onresize事件中重新计算目标对象是否在浏览器可视区域,因此如果先将浏览器窗口缩小到一定尺寸后滚动到需要加载图片的区域后点击最大化，图片加载不出来，呵呵，以后需要注意了).

增加元素:

 
 
 
      
  
  
  1.  "d2" style = "width:50px; height:50px;
    2.   
  
  
  2.  background:blue;position:absolute; 
    3.   
  
  
  3. top:2500px">  
    4.  
 

 
 
 
      
  
  
  1.  //比较某个子区域是否呈现在浏览器区域  
    2.   
  
  
  2.   　　function jiance(arr,prec1,callback){  
    3.   
  
  
  3.    　　　var prec2;  
    4.   
  
  
  4.    　　　for(var i = arr.length - 1 ; i >= 0 ;i--){  
    5.   
  
  
  5.    　　　　 if(arr[i]){  
    6.   
  
  
  6.     　　　　 prec2 =  getSubClient(arr[i]);  
    7.   
  
  
  7.     　　　　 if(intens(prec1,prec2)){  
    8.   
  
  
  8.       　　　　　　callback(arr[i]);  
    9.   
  
  
  9.      　　　　　　 //加载资源后，删除监测  
    10.   
  
  
  10.     　　　　 　　 delete arr[i];  
    11.   
  
  
  11.      　　　　　　}  
    12.   
  
  
  12.     　　　　}  
    13.   
  
  
  13.    　　　}  
    14.   
  
  
  14.   　　}  
    15.   
  
  
  15.     
    16.   
  
  
  16.   　　//检测目标对象是否出现在客户区  
    17.   
  
  
  17.   　　function autocheck(){  
    18.   
  
  
  18.   　　　　 var prec1 = getClient();   
    19.   
  
  
  19.    　　　　jiance(arr,prec1,function(obj){  
    20.   
  
  
  20.  
    21.   
  
  
  21. 　　　　　　//加载资源...  
    22.   
  
  
  22.    　　　　 alert(obj.innerHTML)  
    23.   
  
  
  23.    　　　　})  
    24.   
  
  
  24.   　　}  
    25.   
  
  
  25.   　　//子区域一     
    26.   
  
  
  26.  　　 var d1 = document.getElementById("d1");  
    27.   
  
  
  27.  　　 //子区域二  
    28.   
  
  
  28.   　　var d2 = document.getElementById("d2");  
    29.   
  
  
  29.  
    30.   
  
  
  30. 　　 //需要按需加载区域集合  
    31.   
  
  
  31.   　　var arr = [d1,d2];  
    32.   
  
  
  32.  　　 window.onscroll = function(){  
    33.   
  
  
  33.  
    34.   
  
  
  34. 　　　　 //重新计算  
    35.   
  
  
  35.   　　　　 autocheck();  
    36.   
  
  
  36.   　　}  
    37.   
  
  
  37.  
    38.   
  
  
  38.   　　window.onresize = function(){  
    39.   
  
  
  39.  
    40.   
  
  
  40. 　　　　 //重新计算  
    41.   
  
  
  41.   　　　　 autocheck();  
    42.   
  
  
  42.   　　}  
    43.   
  
  
  43.   
    44.

现在我们只需要在弹窗的地方加载我们需要的资源了.源码就不贴出来了.如果需要的朋友,或着存在疑问的地方,可以联系我.

原文链接：http://www.cnblogs.com/a_bu/archive/2011/01/16/1936989.html

【编辑推荐】

  1. 双倍经验助你升级 JavaScript编程最佳法则
  2. 提升JavaScript递归效率：Memoization技术详解
  3. 揭秘JavaScript对Cookie的操作

当前标题：JavaScript懒加载技术(lazyload)简单实现
标题链接：http://www.shufengxianlan.com/qtweb/news38/336888.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

建站公司知识

行业网站建设

成都品牌网站设计　　 　成都网站运营维护　　 　成都移动托管　　 　雅安电信机房　　 　泸州网站建设　　 　成都微信开发　　 　成都网站建设　　 　成都网站建设　　 　护栏打桩机　　 　网站建设方案　　 　模板商城网站　　 　高端网站设计推广　　 　成都网站改版　　 　成都小程序制作　　 　叙永网站建设　　 　南充机房托管　　 　艾名斯线缆　　 　虚拟主机　　 　成都企业网站设计　　 　眉山托管服务器