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>
<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);
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都是压缩混淆的，看起来挺累，不过大家知道原理就可以了。
实例：
上面说了那么多，最后还是来个实例比较实际点，毕竟眼见为实嘛。
提示：你可以先修改部分代码再运行。
对于tudou这样的大战来说,放弃图片的 alt优化是可以的,我等小民就全靠搜索引擎活啊,当然也可以另定义新的属性来放图片的地址
[回复]