關於JavaScript圖片懶加載與防抖節流

什麼是圖片的懶加載？

當圖片進入瀏覽器的可視區域，才加載該圖片。這樣大大加快了對與圖片較多的頁面的加載熟慮。例如一些較大型網上商城，一個頁面有很多的圖片，如果不使用懶加載，用戶進入網頁的速度會相當慢，這樣用戶體驗可能就沒那麼好了。

實現原理：頁面的<img>標籤中不設置src屬性，將圖片的鏈接寫到data-XXX(XXX自定義)，當img標籤中沒有src屬性，那麼瀏覽器就不會去發請求加載圖片。當目標img滑動到瀏覽器的可視區域時，通過js設置目標img的src屬性，圖片纔會被加載出來。

先貼下html代碼吧，下面所說的方法用的html代碼都一樣

 <div class="img-lists">
        <div class="img-item">
            <img class="img" data-src="./img/1.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/2.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/3.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/4.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/5.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/6.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/7.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/8.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/9.jpg" alt="loading">
        </div>
        <div class="img-item">
            <img class="img" data-src="./img/10.jpg" alt="loading">
        </div>
    </div>

實現方法1:

     第一種相對簡單就直接貼代碼吧，雖然不推薦這種方法

方法二：

相對第一種方法來說，個人比較推薦第二種方法

在介紹第二種方法之前先看一張圖

該圖引用MDN

 我們將使用getBoundingClientRect()來返回一個元素的位置信息，該對象的返回值是一個DOMRech 對象，這個對象是由該元素的 getClientRects()方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合。

由上面的圖可以瞭解到除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

代碼如下：

        var clientHeight = window.innerHeight;//可視化窗口的高度
        function getImgs(){
            const imglist = document.querySelectorAll(".img");
            Array.from(imglist).forEach(el=>{
                if(isShow(el)){
                    loadImg(el)
                }
            })
        }
        /*
        *判斷是否進入可視化窗口        
        */
        function isShow(el){
           const bound = el.getBoundingClientRect();//獲取元素位置
           return bound.top <= clientHeight+50;//+50提前加載
        }
        /*
        * 加載圖片        
        */
        function loadImg(el){
           if(!el.src){
            const source = el.dataset.src;
                   el.src = source
           }
        }

當是呢，如果頻繁滾動滾動條的話，會對計算機資源的一種浪費，這時候就需要運用到函數去抖或者函數節流啦

函數去抖：就是函數調用後在一段時間後才執行，如果在這段時間內，函數再次被調用，會重置這個時間，然後重新等待一段時間之後再執行。例如調用fn函數後，該函數2s後再執行，等到1s鐘的時候，該函數又被調用了一次，這時候就時間就會重置，然後重新再等2s，該函數纔會執行。

下面就貼一個簡單的防抖函數：

函數節流：就是在規定的時間內該函數只能執行一次。方法：設置兩個時間戳，當新的時間戳(當前時間)減去舊的時間戳(上一次執行的時間)的值大於規定時間，即執行函數，反之則不執行。

再貼一個節流的例子代碼：

防抖跟節流都是防止頻繁的dom操作對計算機資源的浪費，都是運用閉包來緩存變量。

最後再調用防抖跟節流

好了，一個完整的懶加載就完成了。有錯誤的或者不同看法，歡迎指正交流