首先，爲什麼要使用懶加載？
目前，對頁面加載速度影響最大的就是圖片了，一張普通的圖片可以達到幾M的大小，而代碼也許就只有幾十KB。當頁面圖片很多時，頁面的加載速度就會變得緩慢，一般在十秒左右頁面還沒有加載完成的話，也許會失去很多的想要繼續閱讀下去的用戶。
所以，對於圖片過多的頁面，爲了加速頁面加載速度，很多時候我們需要將頁面內未出現在可視區域內的圖片先不做加載， 等到滾動到可視區域後再去加載。這樣對於頁面加載性能上會有很大的提升，也提高了用戶體驗。
方法一：設置滾輪事件
將頁面中的img標籤src指向一張小圖片或者src爲空，然後定義data-src屬性指向真實的圖片。src指向一張默認的圖片，否則當src爲空時也會向服務器發送一次請求。可以指向loading的地址。
注：圖片要指定寬高
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />
當載入頁面時，先把可視區域內的img標籤的data-src屬性值負給src，然後監聽滾動事件，把用戶即將看到的圖片加載。這樣便實現了懶加載。
提醒：在寫代碼前，需要了解盒子模型中對各種高度的定義以及其區別，這樣纔不會出現高度的歧義。
代碼如下：
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- img {
- display: block;
- margin-bottom: 50px;
- width: 400px;
- height: 400px;
- }
- </style>
- </head>
- <body>
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
- </body>
- //JavaScript原生代碼如下：
- <script>
- var num = document.getElementsByTagName('img').length;
- var img = document.getElementsByTagName("img");
- var n = 0; //存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
- lazyload(); //頁面載入完畢加載可是區域內的圖片
- window.onscroll = lazyload;
- function lazyload() { //監聽頁面滾動事件
- var seeHeight = document.documentElement.clientHeight;//可見區域高度
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- //滾動條距離頂部高度
- for (var i = n; i < num; i++) {
- if (img[i].offsetTop < seeHeight + scrollTop) {
- if (img[i].getAttribute("src") == "default.jpg") {
- img[i].src = img[i].getAttribute("data-src");
- }
- n = i + 1;
- }
- }
- }
- </script>
- //jQuery原生代碼如下：
- <script>
- var n = 0,
- imgNum = $("img").length,
- img = $('img');
- lazyload();
- $(window).scroll(lazyload);
- function lazyload(event) {
- for (var i = n; i < imgNum; i++) {
- if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
- if (img.eq(i).attr("src") == "default.jpg") {
- var src = img.eq(i).attr("data-src");
- img.eq(i).attr("src", src);
- n = i + 1;
- }
- }
- }
- }
- </script>
方法二：使用節流函數進行性能優化
如果直接將函數綁定在scroll事件上，當頁面滾動時，函數會被高頻的觸發，那麼這樣是非常影響瀏覽器的性能的。
那麼我們可以通過實現限制觸發頻率來進行性能優化。要想限制觸發頻率，就想到了節流函數。
節流函數：只允許一個函數在規定秒數內執行一次。
實例如下：
function throttle(fun, delay, time) {//fun 要執行的函數
var timeout,//delay 延遲//time 在time時間內必須執行一次
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果達到了規定的觸發時間間隔，觸發 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 沒達到觸發間隔，重新設定定時器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 實際想綁定在 scroll 事件上的 handler
function lazyload(event) {}
// 採用了節流函數
window.addEventListener('scroll',throttle(lazyload,500,1000));
如此一來，懶加載問題便是得到了很好的解決，當然，前端博大精深，還有很多的方法去實現，這裏只是最常用，最能理解的方式。
