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

最新推荐文章于 2024-07-07 23:10:31 发布

ArvinStudy

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量753

点赞数

分类专栏：网站性能优化技术文章标签： scroll function border class xhtml 娱乐

技术同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

网站性能优化

14 篇文章 0 订阅

订阅专栏

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

实例：

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

 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
       
        < 
        html 
        xmlns 
        = 
        "http://www.w3.org/1999/xhtml" 
        >  
       
        < 
        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 
        >  
       
        能看的见到图片：< 
        img 
        src 
        = 
        "http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg" 
        />  
       
        < 
        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到本地运行下就可以看到效果了。

[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.

ArvinStudy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
名站技术分析 - 浅谈tudou.com首页图片延迟加载的效果

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

扫一扫