浅谈tudou.com首页图片延迟加载的效果_建站学-个人建站指南,网页制作,网站设计,网站制作教程

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

实现:

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

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

</a>

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

实例：

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

    
            01
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            02
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            03
            <head> 
        
            04
                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        
            05
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  
        
            06
            </head> 
        
            07
            <body> 
        
            08
                能看的见到图片：<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/> 
        
            09
                  
            10
                <div id="lazyBox" style="margin-top:100px;"> 
        
            11
                 一开始看不到的图片： 
        
            12
                 <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"/> 
        
            13
                 <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"/> 
        
            14
              </div> 
        
            15
                <div style="height:1000px;"> 
        
            16
                       
            17
              </div>   
        
            18
              <script type="text/javascript"> 
        
            19
                var hasShow = false; 
        
            20
                $(window).bind("scroll",function(){ 
        
            21
                    if(hasShow==true){ 
        
            22
                        $(window).unbind("scroll"); 
        
            23
                        return; 
        
            24
                    } 
        
            25
                    var t = $(document).scrollTop(); 
        
            26
                    if(t>50){ 
        
            27
                        // 滚动高度超过50，加载图片 
        
            28
                        hasShow = true; 
        
            29
                        $("#lazyBox .lazyImg").each(function(){ 
        
            30
                            $(this).attr("src",$(this).attr("alt")); 
        
            31
                        }); 
        
            32
                    } 
        
            33
                }); 
        
            34
              </script>        
        
            35
            </body> 
        
            36
            </html>

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

(责任编辑：admin)

搜索

热门标签:

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