浅谈tudou.com首页图片延迟加载的效果

作者: nick 分类: css, html, jquery, js 发布时间: 2010-05-25 14:49 ė 6浅谈tudou.com首页图片延迟加载的效果已关闭评论

经常上tudou网,发现tudou首页加载图片的功能很有意思,tudou首页从”娱乐”这个板块往下的所有视频的缩略图并不是在页面打开后就加 载的,而是当用户拖动滚动条到了”娱乐”这个板块,才开始加载图片的。这样做的好处当然是如果有用户不需要查看下面的内容,则免去了下面所有图片的请求, 这对减少服务器的压力还是很有帮助的。

实现:

其实tudou的实现原理很简单,

1.先把所有需要延迟加载的图片的src都设置成同1个小图片的连接(sprite.gif),把真真图片的连接放进图片的alt属性中,look下代 码:



   http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg

    

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()

我没有去跟入查看TUI.widget.quickPlaylist.load()方法的实现,tudou的JS都是压缩混淆的,看起来挺累,不过大家知 道原理就可以了。

实例:

上面说了那么多,最后还是来个实例比较实际点,毕竟眼见为实嘛。
[runcode]







能看的见到图片:

一开始看不到的图片:
http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg
http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg




[/runcode]

把上面代码copy到本地运行下就可以看到效果了。

本文出自 传播、沟通、分享,转载时请注明出处及相应链接。

本文永久链接: https://www.nickdd.cn/?p=583

Ɣ回顶部