大部分網站，都會給網站首頁和部分文章頁面添加一個懶加載效果，從而減少一次性向服務器進行大量請求，前提是同一網頁中有大量的圖片調用。

懶加載：首先將圖片的src鏈接設為同一張圖，并將其真正的圖片地址存儲在img標簽的自定義屬性中。當js監聽到該圖片元素進入可視窗口時，即將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。

顧名思義，簡單理解就是 當頁面打開，首先所有數據引進來的圖片先不顯示，所有圖先加載自己指定的某一張圖片，一般動態圖片效果更有體驗性， 然后真正路徑圖片一個一個顯示到頁面，從而達到懶加載效果。

優點：懶加載能防止頁面一次性向服務器響應大量請求導致服務器響應慢，防止頁面卡頓或崩潰等問題。

下面，就給大家講解下給網站添加懶加載教程

其實就是將圖片src賦值為一張指定的圖片，當用戶滾動滾動條到可視區域圖片時候，再去加載真正的圖片。

css代碼可以自行定義，沒有特殊的要求。

HTML代碼：

< img  src="指定的圖片路徑"  data-src="最終要顯示的圖片路徑" />

< img  src="指定的圖片路徑"  data-src="最終要顯示的圖片路徑" />

在img標簽中，把原本src指向的圖片路徑改為指定的一張圖， 在img標簽中加上data-src 將他指向最終要顯示的圖

src 為路徑

data-src 為自定義屬性

JS代碼:

< script>

 //函數綁定在 scroll 事件上，當頁面滾動時，避免函數被高頻觸發，

 function throttle(fn, delay, atleast) {

//進行去抖處理

 var timeout = null,

 startTime = new Date();

return function() {

var curTime = new Date();

clearTimeout(timeout);

            if(curTime - startTime >= atleast) {

                fn();

                startTime = curTime;

            }else {

                timeout = setTimeout(fn, delay);

            }

        }

    }

    function lazyload() {

        var images = document.getElementsByTagName('img');

        var len    = images.length;

        //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷       

        var n      = 0;

        return function() {

            var seeHeight = document.documentElement.clientHeight;

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            for(var i = n; i < len; i++) {

                if(images[i].offsetTop < seeHeight + scrollTop) {

                    if(images[i].getAttribute('src') === '指定的圖片路徑') {

                     images[i].src = images[i].getAttribute('data-src');

                    }

                n = n + 1;

                 }

            }

        }

    }

    var loadImages = lazyload();

    //初始化首頁的頁面圖片

    loadImages();

    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);

  //函數節流（throttle）與函數去抖（debounce）處理,

    //500ms 的延遲，和 1000ms 的間隔，當超過 1000ms 未觸發該函數，則立即執行該函數，不然則延遲 500ms 執行該函數

< /script>

備注：使用時，把< img  < /script> < /script>等標記中的空格去掉，避免使用不了。

上一篇：前端HTML中iframe標簽詳解

下一篇：網站安全策略是什么？