<dl id="3wz6h"></dl><li id="3wz6h"></li>

      1. <dl id="3wz6h"></dl>

      2. <dl id="3wz6h"><ins id="3wz6h"></ins></dl>

            <dl id="3wz6h"></dl>

            <dl id="3wz6h"><ins id="3wz6h"></ins></dl>
            1. 
              
              <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>

              <li id="3wz6h"><ins id="3wz6h"></ins></li>
              
              

            2. <output id="3wz6h"><ins id="3wz6h"><nobr id="3wz6h"></nobr></ins></output>
              首頁»JavaScript»Image Lazy Load:那些延時加載圖片的開源插件(jQuery)

              Image Lazy Load:那些延時加載圖片的開源插件(jQuery)

              來源:ourjs 發布時間:2015-04-20 閱讀次數:

                圖片延時加載技術對大流量的網站來說是十分實用的。目前圖片在網站中大量使用,如果不加處理的話會對服務器和帶寬造成級大壓力,通過只渲染當前用戶可見區域的圖片,可以極大地減少網站的請求數,降低網絡帶寬資源。

                unveil

                這是一款十分輕量級的片時圖片加載組件

                支持現代瀏覽器及IE7+, Github上面有將近3K個star(關注)

                使用

                一般圖片

              <img src="bg.png" data-src="img1.jpg" /> 

                對于支持 retina (視網膜屏幕) 設備

              <img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" /> 

                應用

              $(document).ready(function() {
                $("img").unveil();
              });

                支持回調

              $("img").unveil(200, function() {
                $(this).load(function() {
                  this.style.opacity = 1;
                });
              });

                支持手動觸發 

              $("img").trigger("unveil");

                jquery_lazyload

                可以延時加載大型網站的圖片,當滾動到區域時再進行渲染。Github上面有4K個關注。

                使用

                引用jQuery和lazyload.js

              <script src="jquery.js" type="text/javascript"></script>
              <script src="jquery.lazyload.js" type="text/javascript"></script>

                需要延時加載的圖片

              <img class="lazy" data-original="img/example.jpg" width="640" height="480">

                應用

              $(function() {
                  $("img.lazy").lazyload();
              });

                echo

                一個獨立徽型JavaScript圖片延時加載庫。不依賴jQuery,壓縮后僅2K。

                支持IE8+

                使用 

              <body>
              
                <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
              
                <script src="dist/echo.js"></script>
                <script>
                echo.init({
                  offset: 100,
                  throttle: 250,
                  unload: false,
                  callback: function (element, op) {
                    console.log(element, 'has been', op + 'ed')
                  }
                });
              
                // echo.render(); //手動觸發調用
                </script>
              </body>

                layzr.js

                前幾天剛剛發布的一款Image Lazy Loading組件,小,快,無依賴(不依賴jQuery),同樣支持retina設備。

              <script src="layzr.min.js"></script>
              <img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image">
              
              <script>
              var layzr = new Layzr({ 
               attr: 'data-layzr', 
               retinaAttr: 'data-layzr-retina', 
               threshold: 0, 
               callback: null 
              });
              </script> 

                更新

                那么,如何讓服務器端將一堆HTML中的img轉變成data-src呢?其實很簡單,幾行正則就可以了,比如在node.js中可以這樣將img的src轉換成data-src(可直接按F12在瀏覽器的Console中運行)

              var html = '包含 <img src="http://ourjs.com/img/weixin.jpg"> 的HTML'
              
              html = html.replace(/<img[^>]+>/g, function(imgstr, idx) {
                imgstr = imgstr.replace(' src=', ' data-src=')
                return imgstr
              })
              
              QQ群:WEB開發者官方群(515171538),驗證消息:10000
              微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
              提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
              網友評論(共1條評論) 正在載入評論......
              理智評論文明上網,拒絕惡意謾罵 發表評論 / 共1條評論
              登錄會員中心
              云南十一选往期