把下面代码copy到外地运转下就能够看到成效了。(义务编者：帝位库)
<!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>
下面说了那样多，最初还是来个范例比拟实践点，终究眼见为实嘛。
范例：
我没有去跟入检查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事情，正在该事情外面的重设一切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="史上最重街舞运动员和最坚硬街舞运动员" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
1.先把一切需求提早加载的图片的src都安装成同1个小图片的联接(sprite.gif)，把真真图片的联接放进图片的alt属性中，look下代码：
实在tudou的完成原理很容易，
完成:
时常上tudou网，发觉tudou首页加载图片的性能很成心思，tudou首页从"文娱"某个铅块往下的一切视频的缩略图并没有是正在页面翻开后就加载的，而是当用户拖动骨碌条到了"文娱"某个铅块，才开端加载图片的。那样做的益处千万是假如有用户没有需求检查上面的形式，则免去了上面一切图片的要求，这对于缩小效劳器的压力还是很有协助的。
。