名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果

  经常上tudou网,发现tudou首页加载图片的功能很有意思,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>   

it知识库名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。