名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果
摘要:经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,
经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,
而是当用户拖动滚动条到了"娱乐"这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,
这对减少服务器的压力还是很有帮助的。
经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从"娱乐"这个板块往下的所有视频的缩略图并不是在页面打开后就加载的,而是当用户拖动滚动条到了"娱乐"这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求,这对减少服务器的压力还是很有帮助的。
实现:
其实tudou的实现原理很简单,
1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代码:
1 2 3 | < 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 > |
2. 绑定window.scroll事件,在该事件里面的重设所有class为lazyImg的图片的src值,在土豆首页找到如下JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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都是压缩混淆的,看起来挺累,不过大家知道原理就可以了。
实例:
上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < 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 > < 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;" > </ 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 > |
把上面代码copy到本地运行下就可以看到效果了。