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

原创 2011年01月16日 23:25:00

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


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


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

   在得到以上两点数据后,通过如下函数,便可得出某对象是否在浏览器可视区域了.
    //返回浏览器的可视区域位置
    function getClient(){
       var l,t,w,h;
       l  =  document.documentElement.scrollLeft || document.body.scrollLeft;
       t  =  document.documentElement.scrollTop || document.body.scrollTop;
       w =   document.documentElement.clientWidth;
       h =   document.documentElement.clientHeight;
       return {'left':l,'top':t,'width':w,'height':h} ;
    }

    //返回待加载资源位置
    function getSubClient(p){
       var l = 0,t = 0,w,h;
       w = p.offsetWidth ;
       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(rec1,rec2){
       var lc1,lc2,tc1,tc2,w1,h1;
       lc1 = rec1.left + rec1.width / 2;
       lc2 = rec2.left + rec2.width / 2;
       tc1 = rec1.top + rec1.height / 2 ;
       tc2 = rec2.top + rec2.height / 2 ;
       w1 = (rec1.width + rec2.width) / 2 ;
       h1 = (rec1.height + rec2.height) / 2;
       return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;
    }

    现在基本上可以实现延时加载了,接下来,我们在 window.onscroll 事件中编写一些代码监控目标区域是否呈现在客户区.
     <div style = "width:100px; height:3000px"></div>
   <div id  = "d1" style = "width:50px; height:50px; background:red;position:absolute; top:1000px">
   </div>
    var d1 = document.getElementById("d1");
    window.onscroll = function(){
       var prec1 = getClient(); 
       var prec2 =  getSubClient(d1);
        if(intens(prec1,prec2)){
          alert("true")
        }
    }

   我们只需要在弹出窗口的地方加载我们需要的资源.
   这里值得注意的是:目标对象呈现在客户区域时,会随着滚动而不断的弹出窗口.因此我们需要在弹出第一个窗口后取消对该区域的监测,这里用一个数组来收集需要监测的对象,同时将监测的逻辑抽出来。因为 onscroll事件和onresize事件都会改变游览器可视区域信息,因此需要分别调用autocheck()函数.(迅雷首页的lazyload没有在onresize事件中重新计算目标对象是否在可视区域,因此如果先将窗口缩小到一定尺寸后滚动到需要加载图片的区域后点击最大化,图片加载不出来,呵呵,以后需要注意了).
   增加元素:<div id  = "d2" style = "width:50px; height:50px; background:blue;position:absolute; top:2500px">
 
    //比较某个子区域是否呈现在浏览器区域
    function jiance(arr,prec1,callback){
      var prec2;
      for(var i = arr.length - 1 ; i >= 0 ;i--){
        if(arr[i]){
         prec2 =  getSubClient(arr[i]);
         if(intens(prec1,prec2)){
            callback(arr[i]);
            //加载资源后,删除监测
            delete arr[i];
           }
        }
      }
    }
  
    //检测目标对象是否出现在客户区
    function autocheck(){
       var prec1 = getClient(); 
       jiance(arr,prec1,function(obj){
        alert(obj.innerHTML)
       })
    }
    //子区域一   
    var d1 = document.getElementById("d1");
    //子区域二
    var d2 = document.getElementById("d2");
    var arr = [d1,d2];
    window.onscroll = function(){
       autocheck();
    }

    window.onresize = function(){
       autocheck();
    }
 

网站优化之如何用原生javascript去完成懒加载技术--lazyload

在不能接受lazyload对img标签修改的情况给出的解决方法,但是依旧还是有性能上的损失。...

jQuery-懒加载技术(lazyload)

第一:lazyLoad简介及作用: 网站性能优化的插件,提高用户体验。 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而...

jquery的lazyload.js实现图片的懒加载

国内关于这个话题的文章不少,但是看了也试了就是没达到效果,搞得我很蛋疼。后面还是直接到官网去看,写的简单明了(http://www.appelsiini.net/projects/lazyload),...

前端如何实现图片懒加载(lazyload) 提高用户体验

定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。  惰性加载是程序人性化的一种体现,提高用...

jquery.lazyload.js实现图片懒加载

jquery.lazyload.js实现图片懒加载:个人理解是将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相...

前端如何实现图片懒加载(lazyload) 提高用户体验

定义 图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。  惰性加载是程序人性化的一种体现,提高用...

懒加载案例lazyload

  • 2016年08月27日 13:07
  • 1016KB
  • 下载

LazyLoad 图片懒加载

  • 2017年06月28日 15:11
  • 2KB
  • 下载

IOS小技巧:属性的lazyload懒加载的使用

懒加载(lazyload)是指对象在使用的时候再进行实例化创建的方法,懒加载的使用可以降低内存占用率,早ios开发中常见的小技巧。 1.懒加载的原理 懒加载实在getter方法的基础上使用的,当我...

js lazyLoad 图片懒加载demo

  • 2016年12月07日 09:38
  • 37KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 懒加载技术(lazyload)简单实现 (转)
举报原因:
原因补充:

(最多只允许输入30个字)