浅谈tudou土豆网首页图片延迟加载的效果经常上土豆网网，发现土豆网首页加载图片的功能很有意思，土豆网首页从娱乐这个板块往下的所有视频的缩略图并不是在页面打开后就加载的，而是当用户拖动滚动条到了娱乐这个板块，才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容，则免去了下面所有图片的请求，这对减少服务器的压力还是很有帮助的。实现：其实土豆网的实现原理很简单， 1.先把所有需要延迟加载的图片的科学研究委员会都设置成同一个小图片的连接(sprite.gif)，把真真图片的连接放进图片的中高音属性中，看下代码：复制代码代码如下：a class= inner target= new title=史上最重街舞选手和最柔软街舞选手href= http://www。土豆网。com/programs/view/UTM t1 _ 6Z-lU/ img width= 120 height= 90 class= pack _ clip img懒mg alt= http://I 01。img。土豆网。com/data/imgs/I/051/720/095/p . jpg src= http://CSS。土豆网ui。com/skin/_ _ g/img绑定窗口。滚动事件，在该事件里面的重设所有班级为lazyImg的图片的科学研究委员会值，在土豆首页找到如下JS:复制代码代码如下：var o=function(){ var s=tui。位置。scroll top()，q=c；if(q.box[0]){ var r=q.box.offset().顶；如果(r-s0r-tui。位置。窗口高度()s){ q . init()} else { q . stop()} } if(！h | | s590){ return true } tui。小部件。快速播放列表。load()；h=false }；o()；$(窗口)。bind(scroll ，o)；我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现，土豆网的射流研究…都是压缩混淆的，看起来挺累，不过大家知道原理就可以了。实例：上面说了那么多，最后还是来个实例比较实际点，毕竟眼见为实嘛。复制代码代码如下：DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。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。谷歌API。com/Ajax/libs/jquery/1.4/jquery。量滴js /脚本/头体能看的见到图片：img src= http://at-img 4。TD img。com/board/2010/5/tylc-115 x55。jpg /div id= lazy box style= margin-top:100px；一开始看不到的图片：img width= 120 height= 90 style= border:1px纯蓝；懒惰的mg alt= http://I 01。img。土豆网。com/data/imgs/I/051/720/095/p . jpg src= http://CSS。土豆网ui。com/skin/_ _ g/img/sprite。gif coords= _ DAA /img width= 120 height= 90 style= border:1px纯蓝；懒mg alt= http://I 01 .img。土豆网。com/data/imgs/I/051/871/396/m20。jpg src= http://CSS。土豆网ui。com/skin/_ _ g/img/sprite。gif coords= _ DBA //div div style= height:1000 px；nbsp/div script type= text/JavaScript var hasShow=false。$(窗口)。bind(scroll ，function(){ if(hasShow==true){ $(window).解除绑定(‘卷轴’)；返回；} var t=$(文档)。滚动顶部()；if(t50){ //滚动高度超过50,加载图片hasShow=true$(#lazyBox .懒mg’).each(function(){ $(this).属性( src ，$(这个)。attr( alt )；});} });/script /body /html把上面代码复制到本地运行下就可以看到效果了。