名站技術分析 - 淺談tudou.com首頁圖片延遲加載的效果

作者: BearRui(AK-47) 來源: 博客園發布時間: 2010-11-08 21:29 閱讀: 1002 次推薦: 0 原文鏈接 [收藏]

摘要：經常上tudou網，發現tudou首頁加載圖片的功能很有意思，tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的，

　　經常上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到本地運行下就可以看到效果了。

標簽：圖片延遲加載