一、為什么需要懶加載？

• 對(duì)于圖片過(guò)多的使用場(chǎng)景，為了提高頁(yè)面加載速度，改善用戶體驗(yàn)，我們對(duì)未出現(xiàn)在視野范圍內(nèi)的圖片先不進(jìn)行加載，等到出現(xiàn)在視野范圍才去加載。

二、懶加載的實(shí)現(xiàn)原理

-它的實(shí)現(xiàn)原理很簡(jiǎn)單，先把img的src指向一個(gè)小圖片，圖片真實(shí)的地址存儲(chǔ)在img一個(gè)自定義的屬性里,<img src="lazy-load.png" data-src="xxx" />,等到此圖片出現(xiàn)在視野范圍內(nèi)了，獲取img元素，把data-src里的值賦給src。

三、實(shí)現(xiàn)懶加載必備的知識(shí)點(diǎn)

（一）獲取窗口、窗口滾動(dòng)和元素距離窗口頂部的偏移高度，計(jì)算元素是否出現(xiàn)在窗口可視范圍內(nèi)；

Paste_Image.png

    function isShow($el){
      var winH = $(window).height(),//獲取窗口高度
            scrollH = $(window).scrollTop(),//獲取窗口滾動(dòng)高度
            top = $el.offset().top;//獲取元素距離窗口頂部偏移高度
      if(top < scrollH + winH){
          return true;//在可視范圍
        }else{
          return false;//不在可視范圍
        }
      }

（二）監(jiān)聽(tīng)窗口滾動(dòng)事件，檢查元素是否在可視范圍內(nèi);

    $(window).on('scroll', function(){//監(jiān)聽(tīng)滾動(dòng)事件
        checkShow();
    })
    checkShow();
    function checkShow(){//檢查元素是否在可視范圍內(nèi)
        $('img').each(function(){//遍歷每一個(gè)元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判斷是否已加載
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//設(shè)置時(shí)間是為了更好的看出效果
            };
        });
    }

（三）元素顯示的時(shí)候把之前的默認(rèn)照片替換成data-src里的照片。

    function showImg($el){
        $el.attr('src', $el.attr('data-src'));
        $cur.data('isloaded',true);
    }

Paste_Image.png

Paste_Image.png