關於懶載入原理

伸個爪子發表於2018-12-13

  • 為什麼要用懶載入?

1.1 能提升使用者的體驗，不妨設想下，使用者開啟像手機淘寶長頁面的時候，如果頁面上所有的圖片都需要載入，由於圖片數目較大，等待時間很長，
使用者難免會心生抱怨,這就嚴重影響使用者體驗。
1.2 減少無效資源的載入，這樣能明顯減少了伺服器的壓力和流量，也能夠減小瀏覽器的負擔。
1.3 防止併發載入的資源過多會阻塞js的載入，影響網站的正常使用。

  • 懶載入原理

2.1 遍歷每張圖片，圖片到document上邊的距離offset().top <=視窗的高度$(window).heght() + 元素滾出去的距$(ducument).scrollTop() 
時進行載入
2.2 以上情況下，新增自定義屬性 attr("loaded",1) ,將data-src的值賦值給圖片的src
2.3以上封裝為函式 ，滾動的情況下呼叫此函式
2.4trigger()方法自動觸發事件

  <ul>
      <li>
          <img src="未載入時固定圖片" src="https://segmentfault.com真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未載入時固定圖片" src="https://segmentfault.com真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未載入時固定圖片" src="https://segmentfault.com真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未載入時固定圖片" src="https://segmentfault.com真實圖片路徑" alt="">
      </li>
    </ul>
    
    <script src="./jquery.js"></script>
    <script>
    $(function(){
        function lazyload(){
            $(`img`).each(function (index, value) {
            
                if($(this).attr(`loaded`) == `1`)return;
      
                if ($(this).offset().top <= $(window).height() + $(document).scrollTop()) {
                    $(this).attr(`src`,$(this).attr(`data-src`)).attr(`loaded`,`1`);
                }
            })
        }
        $(window).scroll(function(){
            lazyload();
        }).trigger(`scroll`);
    })
    </script>

相關文章