把下面代碼copy到外地運(yùn)轉(zhuǎn)下就能夠看到成效了。(義務(wù)編者：帝位庫)
<!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;"> &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){ // 骨碌高低超越50，加載圖片 hasShow = true; $("#lazyBox .lazyImg").each(function(){ $(this).attr("src",$(this).attr("alt")); }); } }); </script> </body> </html>
下面說了那樣多，最初還是來個(gè)范例比擬實(shí)踐點(diǎn)，終究眼見為實(shí)嘛。
范例：
我沒有去跟入檢查TUI.widget.quickPlaylist.load()辦法的完成，tudou的JS都是緊縮混雜的，看上去挺累，沒有過自己曉得原理就能夠了。
$(window).bind("scroll",o);
o();
};
h=false
TUI.widget.quickPlaylist.load();
if(!hs<590){return true}
}
}
q.stop()
}else{
q.init()
if(r-s>0&&r-TUI.pos.windowHeight()<s){
var r=q.box.offset().top;
if(q.box[0]){
var s=TUI.pos.scrollTop(),q=c;
var o=function(){
2. 綁定window.scroll事情，正在該事情外面的重設(shè)一切class為lazyImg的圖片的src值，正在馬鈴薯首頁找出如次JS:
</a>
<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 class="inner" target="new" title="史上最重街舞運(yùn)動(dòng)員和最堅(jiān)硬街舞運(yùn)動(dòng)員" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
1.先把一切需求提早加載的圖片的src都安裝成同1個(gè)小圖片的聯(lián)接(sprite.gif)，把真真圖片的聯(lián)接放進(jìn)圖片的alt屬性中，look下代碼：
實(shí)在tudou的完成原理很容易，
完成:
時(shí)常上tudou網(wǎng)，發(fā)覺tudou首頁加載圖片的性能很成心思，tudou首頁從"文娛"某個(gè)鉛塊往下的一切視頻的縮略圖并沒有是正在頁面翻開后就加載的，而是當(dāng)用戶拖動(dòng)骨碌條到了"文娛"某個(gè)鉛塊，才開端加載圖片的。那樣做的益處千萬是假如有用戶沒有需求檢查上面的形式，則免去了上面一切圖片的要求，這對于縮小效勞器的壓力還是很有協(xié)助的。
。