淺談tudou土豆網(wǎng)首頁(yè)圖片延遲加載的效果

更新時(shí)間：2010年06月23日 12:47:12 作者：

經(jīng)常上tudou網(wǎng)，發(fā)現(xiàn)tudou首頁(yè)加載圖片的功能很有意思，tudou首頁(yè)從"娛樂(lè)"這個(gè)板塊往下的所有視頻的縮略圖并不是在頁(yè)面打開(kāi)后就加載的，而是當(dāng)用戶(hù)拖動(dòng)滾動(dòng)條到了"娛樂(lè)"這個(gè)板塊，才開(kāi)始加載圖片的。

這樣做的好處當(dāng)然是如果有用戶(hù)不需要查看下面的內(nèi)容，則免去了下面所有圖片的請(qǐng)求，這對(duì)減少服務(wù)器的壓力還是很有幫助的。
實(shí)現(xiàn):
其實(shí)tudou的實(shí)現(xiàn)原理很簡(jiǎn)單，
1.先把所有需要延遲加載的圖片的src都設(shè)置成同1個(gè)小圖片的連接(sprite.gif)，把真真圖片的連接放進(jìn)圖片的alt屬性中，look下代碼：

復(fù)制代碼代碼如下:

 
<a class="inner" target="new" title="史上最重街舞選手和最柔軟街舞選手" > 
<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事件，在該事件里面的重設(shè)所有class為lazyImg的圖片的src值，在土豆首頁(yè)找到如下JS:

復(fù)制代碼代碼如下:

 
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); 

我沒(méi)有去跟入查看TUI.widget.quickPlaylist.load()方法的實(shí)現(xiàn)，tudou的JS都是壓縮混淆的，看起來(lái)挺累，不過(guò)大家知道原理就可以了。
實(shí)例：
上面說(shuō)了那么多，最后還是來(lái)個(gè)實(shí)例比較實(shí)際點(diǎn)，畢竟眼見(jiàn)為實(shí)嘛。

復(fù)制代碼代碼如下:

 
<!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> 
能看的見(jiàn)到圖片：<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/> 

<div id="lazyBox" style="margin-top:100px;"> 
一開(kāi)始看不到的圖片： 
<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;"> 
&nbsp; 
</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){ 
// 滾動(dòng)高度超過(guò)50，加載圖片 
hasShow = true; 
$("#lazyBox .lazyImg").each(function(){ 
$(this).attr("src",$(this).attr("alt")); 
}); 
} 
}); 
</script> 
</body> 
</html> 