圖片懶載入原理

什麼是圖片懶載入？

當開啟一個有很多圖片的頁面時，先只載入頁面上可視區域的圖片，等滾動到頁面下面時，再載入所需的圖片。這就是圖片懶載入。

圖片懶載入的作用

減少或延遲請求數，緩解瀏覽器的壓力，增強使用者體驗。

圖片懶載入的基本原理

1､設定圖片src屬性為同一張圖片，同時自定義一個data-src屬性來儲存圖片的真實地址
2､ 頁面初始化顯示的時候或者瀏覽器發生滾動的時候判斷圖片是否在視野中
3､ 當圖片在視野中時，通過js自動改變該區域的圖片的src屬性為真實地址

1.document.documentElement.clientHeight獲取螢幕可視視窗大小；
2.document.documentElement.scrollTop獲取瀏覽器視窗頂部與文件頂部之間的距離，也就是滾動條滾動的距離
3.判斷當滾動條滾動到一定高度的時候就進行圖片懶載入；

    let lazyImages = [...document.querySelectorAll('.lazy-image')]
    let inAdvance = 300 // 自定義一個高度，當距離300px到達圖片時載入
    function lazyLoad() {
        lazyImages.forEach(image => {
            if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) { // 距離xxpx時載入圖片
                image.src = image.dataset.src
                image.onload = () => image.classList.add('loaded')
            }
        })
    }
    lazyLoad()
    window.addEventListener('scroll', _.throttle(lazyLoad, 16)) // 用到了lodash的節流函式
    window.addEventListener('resize', _.throttle(lazyLoad, 16))