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

简介:

  经常上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>   

 

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

 

实例:

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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<! 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/archive/2010/05/25/tudou_lazy_image.html    ,如需转载请自行联系原作者



相关文章
|
1月前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的10个技巧
【10月更文挑战第25天】在互联网时代,网页加载速度直接影响用户体验和搜索引擎排名。本文介绍了10个提升网页加载速度的技巧,包括减少HTTP请求、启用压缩、使用CDN、延迟加载非关键资源、优化图片、减少重定向、使用浏览器缓存、优化CSS和JavaScript、异步加载JavaScript以及代码分割。通过这些方法,可以显著提高网页性能,改善用户体验。
255 5
|
3月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
4月前
|
搜索推荐 前端开发 JavaScript
源码分享:HTML+CSS动画打造个性化登录页!
源码分享:HTML+CSS动画打造个性化登录页!
源码分享:HTML+CSS动画打造个性化登录页!
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
|
4月前
|
数据采集 前端开发 测试技术
如何爬取瀑布流网页加载的内容
本文探讨了爬取瀑布流网页内容的策略。首先解析了其工作原理——通过Ajax请求动态加载数据,并介绍了利用浏览器开发者工具分析这些请求的方法。随后,文章讲解了如何使用Python模拟这些请求,处理动态加载的内容,并推荐了Selenium等自动化工具以简化流程。最后强调了在爬虫开发过程中需遵守网站规定及道德准则的重要性。
|
7月前
|
缓存 前端开发 JavaScript
前端性能优化:提升网页加载速度的关键技巧
【2月更文挑战第11天】 在当今互联网高速发展的时代,网页加载速度成为影响用户体验和网站成功的重要因素。本文将深入探讨前端性能优化的关键技巧,包括资源压缩、图片优化、HTTP缓存、代码精简等方面,为前端开发者提供实用的指导和建议。
|
7月前
|
JavaScript 算法 前端开发
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
JS懒加载 -- 适用于商城主页商品懒加载、图片懒加载,算法简单、易于理解、萌新福音
63 0
|
定位技术 Android开发
如何做一个简单的网页版地图
如何做一个简单的网页版地图
218 1
|
前端开发
前端工作总结129-首页样式调整第一次
前端工作总结129-首页样式调整第一次
97 0
前端工作总结129-首页样式调整第一次