一、懶加載

1. 介紹

• 條件加載：符合某些條件，或觸發(fā)了某些事件，才將自定義屬性中的地址存儲到src屬性中，開始異步加載

• 可視區(qū)加載：僅加載用戶可以看到的區(qū)域。當js監(jiān)聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中，開始異步加載。

   

  

                  var lazyLoad = (function(){                    var clock;                    
                      function init(){                        //監(jiān)聽瀏覽器滾動事件，持續(xù)滾動后停留200ms才會觸發(fā)checkShow()
                          $(window).on("scroll", function(){                            if (clock) {
                                  clearTimeout(clock);
                              }
                              clock = setTimeout(function(){
                                  checkShow();
                              }, 200);
                          })
                          checkShow();
                      }                    
                      function checkShow(){
                          $(".lazyload img").each(function(){                            var $cur =$(this);                            //若某圖片已經顯示，則return
                              if($cur.attr('isLoaded')){                                return;
                              }                            //若某圖片應該顯示卻還未顯示，則將其顯示出來
                              if(shouldShow($cur)){
                                  showImg($cur);
                              }
                          })
                      }                    //判斷圖片是否應該顯示
                      function shouldShow($node){                        var scrollH = $(window).scrollTop(), //窗口的垂直滾動條位置
                              winH = $(window).height(), //窗口高度
                              top = $node.offset().top;  //圖片相對于整個文檔的偏移top坐標
                          if(top < winH + scrollH){                            return true;
                          }else{                            return false;
                          }
                      }                    //將圖片顯示出來
                      function showImg($node){
                          $node.attr('src', $node.attr('data-src'));
                          $node.attr('isLoaded', true);
                      }                    return {
                          init: init
                      }
                  })()
                  lazyLoad.init();

  

   

   

   

  

• 懶加載也就是延遲加載。

• 當訪問一個頁面的時候，先把所有img標簽的src設為同一張空白圖片的路徑（占位圖，只需請求一次），將其真正的圖片地址存儲在img標簽的自定義屬性中（比如data-src）

• 兩種加載情況：

2. 目的

• 很多頁面，內容很豐富，頁面很長，圖片較多，而且比較大。

• 懶加載能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。

• 減少請求數(shù)或延遲請求數(shù)，使頁面加載速度快，用戶體驗好

二、預加載

1. 介紹

• 提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染

2. 目的

• 圖片預先加載到瀏覽器中，訪問者便可順利地在你的網(wǎng)站上沖浪，并享受到極快的加載速度。

• 這對圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽你網(wǎng)站內容時獲得更好的用戶體驗。

3. 實現(xiàn)

• 注意：要將img.src放在img.onload后面

• 問題：

• 若沒有緩存：沒問題

• 若有緩存，有問題

• 給img.src賦值后開始異步加載圖片，加載過程的時間很長，當加載完圖片時，onload的賦值語句已經執(zhí)行，所以加載完圖片發(fā)生onload事件時就會調用callback函數(shù)。

• 給img.src賦值后開始異步加載圖片，加載過程的時間很短，當加載完圖片時，還沒有執(zhí)行到onload的賦值語句，所以加載完圖片發(fā)生onload事件時不會調用callback函數(shù)。

• 否則，若將img.src放在img.onload前面

• 內存泄漏：img.onload引用的匿名函數(shù)形成了閉包，閉包的作用域鏈中保存著img，創(chuàng)建了循環(huán)引用

• 只考慮了靜態(tài)圖片的加載，忽略了gif等動態(tài)圖片，可能會多次觸發(fā)onload

• 方法一 ×

   

  

              function loadImage(url, callback) {     
                  var img = new Image(); //創(chuàng)建一個Image對象，實現(xiàn)圖片的預下載     
                  img.onload = function () { //圖片下載完畢時調用callback函數(shù)。                            callback(img);     
                   };  
                  img.src = url;     
  };

  

   

• 方法二 √：解決方法一的問題

   

  

              function loadImage(url, callback) {     
                  var img = new Image(); //創(chuàng)建一個Image對象，實現(xiàn)圖片的預下載         
                  img.onload = function () { //圖片下載完畢時將img.onload設為null，并異步調用callback函數(shù)。         
                      img.onload = null;    
                      callback(img);     
                  };  
                  img.src = url;     
  };

  

http://www.cnblogs.com/xuehaoyue/p/7172053.html

延伸閱讀

• 知識和經驗的重要性 2023-04-15
• 嚴謹和負責 2023-04-15
• 可貴的勞動成果和堅實的同學情誼 2021-06-01
• 堅持和蛻變 2020-06-11
• 我和萬碼學堂一起走過的美好時光 2020-06-11
• 我和萬碼學堂一起走過的美好時光——張*祥 2020-01-15
• 青島信睿智和信息技術有限公司 2019-12-12
• 實訓給我提供了獨特的學習方法和經驗——顏*育 2019-07-05
• 體驗到成功和收獲的快樂——王*陽 2019-03-12
• 凡事預則立不預則廢——朱*曉 2018-12-26

知識和經驗的重要性