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

本篇文章主要介绍了"浅谈tudou.com首页图片延迟加载的效果"，对于web前端感兴趣的同学可以参考一下：

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

 实现:

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

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

  

  

     

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

    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都是压缩混淆的，看起来挺累，不过大家知道原理就可以了。

实例：

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

view sourceprint?01  

02  

03  

04      

05       

06  

07  

08     能看的见到图片： 

09       

10    

 

15    

   

18           

35