一、概念

“懶加載”就是延遲加載，比如我們加載一個(gè)頁(yè)面，這個(gè)頁(yè)面長(zhǎng)到我們的瀏覽器可視區(qū)域裝不下，那么懶加載就是優(yōu)先加載可視區(qū)域的內(nèi)容，其他部分等進(jìn)入了可視區(qū)域再加載。懶加載是一種網(wǎng)頁(yè)性能優(yōu)化的方式，它能極大的提升用戶體驗(yàn)。比如圖片，現(xiàn)在一張圖片經(jīng)常會(huì)超過(guò)幾兆，如果每次進(jìn)入頁(yè)面就請(qǐng)求所有的圖片資源，那么可能等圖片加載出來(lái)用戶也早就走了。所以，我們需要懶加載，進(jìn)入頁(yè)面的時(shí)候，只請(qǐng)求可視區(qū)域的圖片資源。

二、原理

圖片的來(lái)源主要是src屬性，瀏覽器是否發(fā)起請(qǐng)求是根據(jù)是否有src屬性決定的。我們考慮在沒(méi)進(jìn)入可視區(qū)域的時(shí)候，我們先不給這個(gè)圖片標(biāo)簽賦src屬性，這樣瀏覽器就不會(huì)發(fā)送請(qǐng)求了。

三、實(shí)現(xiàn)

• window.innerHeight：瀏覽器窗口的視口（viewport）高度（以像素為單位），如果有水平滾動(dòng)條，也包括滾動(dòng)條高度
• document.documentElement.clientHeight：獲取屏幕可視區(qū)域的高度

• getBoundingClientRect()：獲取元素的大小及位置，它有四個(gè)屬性，top -上邊距離視窗上邊的距離，bottom -下邊距離視窗上邊的距離，left 左邊距離視窗左邊的距離，right -右邊距離視窗左邊的距離，如圖：

  
  
• 代碼實(shí)現(xiàn)

// 圖片全部加載完成后移除事件監(jiān)聽(tīng)；
// 加載完的圖片，從 imgList 移除；
let imgList = [...document.querySelectorAll('img')]
let length = imgList.length
// 把圖片查詢(xún)分配到一個(gè)數(shù)組
const imgLazyLoad = function() {
    let count = 0
   return (function() {
        let deleteIndexList = []
        imgList.forEach((img, index) => {
            let rect = img.getBoundingClientRect()
            if (rect.top < window.innerHeight) {
                img.src = img.dataset.src
                deleteIndexList.push(index)
                count++
                if (count === length) {
                    document.removeEventListener('scroll', imgLazyLoad)
                }
            }
        })
        imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
        // 刪除imgList里面加載完的圖片
   })()
}

// 這里最好加上防抖處理
document.addEventListener('scroll', imgLazyLoad)

//document.removeEventListener('scroll', imgLazyLoad) 就是圖片全部加載完成后移除事件監(jiān)聽(tīng)，通過(guò)移除監(jiān)聽(tīng)事件來(lái)實(shí)現(xiàn)防抖處理