關於懶加載原理

• 爲何要用懶加載?

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="未加載時固定圖片" data-src="真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未加載時固定圖片" data-src="真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未加載時固定圖片" data-src="真實圖片路徑" alt="">
      </li>
      <li>
          <img src="未加載時固定圖片" data-src="真實圖片路徑" 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>