posts - 36, comments - 419, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

 

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

      经常上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="pack_clipImg 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"/>

   </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=UTF-8" />
    
<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到本地运行下就可以看到效果了。

 



[作者]:BearRui(AK-47)
[博客]: http://www.blogjava.net/bearrui/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.
英雄,别走啊,帮哥评论下:  

精彩推荐 好文要顶 水平一般 看不懂 还需努力

评论

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-25 08:21 by yx
好文

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-25 09:26 by 咖啡妆
方法不错 但是细节东西太多

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-25 09:26 by 咖啡妆
方法不错 但是细节东西太多

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-25 10:21 by BearRui(AK-47)
@咖啡妆
细节东西不多吧,应该还算简单。

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-26 11:32 by Archey
TUI类,都被剥离出来了,不错

# re: 浅谈tudou.com首页图片延迟加载的效果[未登录]  回复  更多评论   

2010-05-28 16:25 by m
http://www.zoeey.com/2010/05/28/image-lazy-load-visible-range-load/

图片延迟加载,可视区域图片加载

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-29 20:48 by 炽芒文学网
学到东西了~~~

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-05-29 21:41 by BearRui(AK-47)
@炽芒文学网
谢谢支持

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-06-09 17:09 by panasia
google阅读器,淘宝现在的列表也都是采用了这种效果。。

# re: 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-06-09 17:11 by BearRui(AK-47)
@panasia
google reader的延迟加载比这个要复杂很多。因为分析的内容比较多。

# re: 名站技术分析 — 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2010-06-24 13:56 by pandora style beads
顶了,不错

# re: 名站技术分析 — 浅谈tudou.com首页图片延迟加载的效果  回复  更多评论   

2012-12-05 10:17 by 子痕
看到这个就乐了“ 英雄,别走啊,帮哥评论下:”

只有注册用户登录后才能发表评论。


网站导航: