博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

浅谈tudou.com首页图片延迟加载的效果 [转]

Posted on 2010-05-25 09:20  gzlxm  阅读(219)  评论(0)    收藏  举报

   经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,而是当用户拖动滚动条到了"娱乐"这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。

 

实现:

 

   其实tudou的实现原理很简单,

 

   1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码:

   <a class="inner" target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">

    <img width="120" height="90" class="lazyImg pack_clipImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>

   </a>   

 

   2. 绑定window.scroll事件,在该事件里面的重设所有class为lazyImg的图片的src值,在土豆首页找到如下JS:

   var o=function(){

    var s=TUI.pos.scrollTop(),q=c;

    if(q.box[0]){

     var r=q.box.offset().top;

      if(r-s>0&&r-TUI.pos.windowHeight()<s){

    q.init()

     }else{

    q.stop()

     }

   }

   if(!h||s<590){return true}

    TUI.widget.quickPlaylist.load();

    h=false

};

    o();

    $(window).bind("scroll",o);

 

   我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。

 

实例:

     上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 <html xmlns="http://www.w3.org/1999/xhtml"> 

 <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  

 </head> 

 <body> 

     能看的见到图片:<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/

      

     <div id="lazyBox" style="margin-top:100px;"> 

     一开始看不到的图片: 

     <img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> 

      <img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/> 

   </div> 

     <div style="height:1000px;"> 

           

   </div>   

  <script type="text/javascript"> 

     var hasShow = false; 

     $(window).bind("scroll",function(){ 

         if(hasShow==true){ 

            $(window).unbind("scroll"); 

             return; 

        } 

         var t = $(document).scrollTop(); 

        if(t>50){ 

             // 滚动高度超过50,加载图片 

            hasShow = true; 

            $("#lazyBox .lazyImg").each(function(){ 

                 $(this).attr("src",$(this).attr("alt")); 

            }); 

        } 

    }); 

   </script>        

 </body> 

 </html>       

     把上面代码copy到本地运行下就可以看到效果了。

转自:http://www.cnblogs.com/BearsTaR/