,,浅谈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把上面代码复制到本地运行下就可以看到效果了。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。