有時候一個網頁會包含很多的圖片，例如淘寶京東這些購物網站，商品圖片多隻之又多，頁面圖片多，載入的圖片就多。伺服器壓力就會很大。不僅影響渲染速度還會浪費頻寬。比如一個1M大小的圖片，併發情況下，達到1000併發，即同時有1000個人訪問，就會產生1個G的頻寬。

為了解決以上問題，提高使用者體驗，就出現了懶載入方式來減輕伺服器的壓力，優先載入可視區域的內容，其他部分等進入了可視區域再載入，從而提高效能。

vue專案中的打包，是把html、css、js進行打包，還有圖片壓縮。但是打包時把css和js都分成了幾部分，這樣就不至於一個css和就是檔案非常大。也是優化效能的一種方式。
效果動圖如下：

進入正題------懶載入

1.懶載入原理

一張圖片就是一個<img>標籤，瀏覽器是否發起請求圖片是根據<img>的src屬性，所以實現懶載入的關鍵就是，在圖片沒有進入可視區域時，先不給<img>的src賦值，這樣瀏覽器就不會發送請求了，等到圖片進入可視區域再給src賦值。

2.懶載入思路及實現

實現懶載入有四個步驟，如下：
1.載入loading圖片
2.判斷哪些圖片要載入【重點】
3.隱形載入圖片
4.替換真圖片

1.載入loading圖片是在html部分就實現的，程式碼如下：

2.如何判斷圖片進入可視區域是關鍵。
引用網友的一張圖，可以很清楚的看出可視區域。

如上圖所示，讓在瀏覽器可視區域的圖片顯示，可視區域外的不顯示，所以當圖片距離頂部的距離top-height等於可視區域h和滾動區域高度s之和時說明圖片馬上就要進入可視區了，就是說當top-height<=s+h時，圖片在可視區。

HTMLElement.offsetTop 為只讀屬性，它返回當前元素相對於其 offsetParent 元素的頂部的距離。
window.innerHeight：瀏覽器視窗的視口（viewport）高度（以畫素為單位）；如果有水平滾動條，也包括滾動條高度。

具體實現的js程式碼為：

// onload是等所有的資原始檔載入完畢以後再繫結事件
window.onload = function(){
	// 獲取圖片列表，即img標籤列表
	var imgs = document.querySelectorAll('img');

	// 獲取到瀏覽器頂部的距離
	function getTop(e){
		return e.offsetTop;
	}

	// 懶載入實現
	function lazyload(imgs){
		// 可視區域高度
		var h = window.innerHeight;
		//滾動區域高度
		var s = document.documentElement.scrollTop || document.body.scrollTop;
		for(var i=0;i<imgs.length;i++){
			//圖片距離頂部的距離大於可視區域和滾動區域之和時懶載入
			if ((h+s)>getTop(imgs[i])) {
				// 真實情況是頁面開始有2秒空白，所以使用setTimeout定時2s
				(function(i){
					setTimeout(function(){
						// 不加立即執行函式i會等於9
						// 隱形載入圖片或其他資源，
						//建立一個臨時圖片，這個圖片在記憶體中不會到頁面上去。實現隱形載入
						var temp = new Image();
						temp.src = imgs[i].getAttribute('data-src');//只會請求一次
						// onload判斷圖片載入完畢，真是圖片載入完畢，再賦值給dom節點
						temp.onload = function(){
							// 獲取自定義屬性data-src，用真圖片替換假圖片
							imgs[i].src = imgs[i].getAttribute('data-src')
						}
					},2000)
				})(i)
			}
		}
	}
	lazyload(imgs);

	// 滾屏函式
	window.onscroll =function(){
		lazyload(imgs);
	}
}