posts - 36, comments - 419, trackbacks - 0, articles - 0
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

           

          經常上tudou網,發現tudou首頁加載圖片的功能很有意思,tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的,
          而是當用戶拖動滾動條到了"娛樂"這個板塊,才開始加載圖片的。這樣做的好處當然是如果有用戶不需要查看下面的內容,則免去了下面所有圖片的請求,
          這對減少服務器的壓力還是很有幫助的。

                經常上tudou網,發現tudou首頁加載圖片的功能很有意思,tudou首頁從"娛樂"這個板塊往下的所有視頻的縮略圖并不是在頁面打開后就加載的,而是當用戶拖動滾動條到了"娛樂"這個板塊,才開始加載圖片的。這樣做的好處當然是如果有用戶不需要查看下面的內容,則免去了下面所有圖片的請求,這對減少服務器的壓力還是很有幫助的。

           

          實現:

           

             其實tudou的實現原理很簡單,

           

             1.先把所有需要延遲加載的圖片的src都設置成同1個小圖片的連接(sprite.gif),把真真圖片的連接放進圖片的alt屬性中,look下代碼:

             <a class="inner" target="new" title="史上最重街舞選手和最柔軟街舞選手" >

             <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都是壓縮混淆的,看起來挺累,不過大家知道原理就可以了。

           

          實例:

               上面說了那么多,最后還是來個實例比較實際點,畢竟眼見為實嘛。

           <!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.aygfsteel.com/bearrui/
          [聲明]:本博所有文章版權歸作者所有(除特殊說明以外),轉載請注明出處.
          英雄,別走啊,幫哥評論下:  

          精彩推薦 好文要頂 水平一般 看不懂 還需努力

          評論

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-25 08:21 by yx
          好文

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-25 09:26 by 咖啡妝
          方法不錯 但是細節東西太多

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-25 09:26 by 咖啡妝
          方法不錯 但是細節東西太多

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-25 10:21 by BearRui(AK-47)
          @咖啡妝
          細節東西不多吧,應該還算簡單。

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-26 11:32 by Archey
          TUI類,都被剝離出來了,不錯

          # re: 淺談tudou.com首頁圖片延遲加載的效果[未登錄]  回復  更多評論   

          2010-05-28 16:25 by m
          http://www.zoeey.com/2010/05/28/image-lazy-load-visible-range-load/

          圖片延遲加載,可視區域圖片加載

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-29 20:48 by 熾芒文學網
          學到東西了~~~

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-05-29 21:41 by BearRui(AK-47)
          @熾芒文學網
          謝謝支持

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-06-09 17:09 by panasia
          google閱讀器,淘寶現在的列表也都是采用了這種效果。。

          # re: 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-06-09 17:11 by BearRui(AK-47)
          @panasia
          google reader的延遲加載比這個要復雜很多。因為分析的內容比較多。

          # re: 名站技術分析 — 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2010-06-24 13:56 by pandora style beads
          頂了,不錯

          # re: 名站技術分析 — 淺談tudou.com首頁圖片延遲加載的效果  回復  更多評論   

          2012-12-05 10:17 by 子痕
          看到這個就樂了“ 英雄,別走啊,幫哥評論下:”
          主站蜘蛛池模板: 南昌市| 富锦市| 名山县| 武冈市| 浑源县| 红桥区| 宜兴市| 江门市| 平江县| 双牌县| 淮安市| 马山县| 尖扎县| 凌源市| 乌海市| 伊宁县| 义马市| 台湾省| 阿坝县| 华容县| 宿迁市| 正阳县| 廉江市| 抚远县| 昌平区| 噶尔县| 平远县| 济源市| 桃园市| 黄平县| 隆化县| 防城港市| 弋阳县| 吉首市| 化德县| 太康县| 思南县| 陇川县| 台北县| 宽甸| 阿鲁科尔沁旗|