[转载]首页图片延迟加载的效果
转载：http://www.cnblogs.com/BearsTaR/archive/2010/05/25/tudou_lazy_image.html
?
经常上tudou网，发现tudou首页加载图片的功能很有意思，tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了"娱乐"这个板块，才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。
实现:?
?? 其实tudou的实现原理很简单，
?? 1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif)，把真真图片的连接放进图片的alt属性中，look下代码：
?? <a target="new" title="史上最重街舞选手和最柔软街舞选手" href="http://www.tudou.com/programs/view/Utmt1_6Z-lU/">
?? <img width="120" height="90" alt="[转载]主页图片延迟加载的效果" 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;" alt="[转载]主页图片延迟加载的效果" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/> <img width="120" height="90" style="border:1px solid blue;" alt="[转载]主页图片延迟加载的效果" 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>?
?