二：預加載和懶加載的區別
預加載與懶加載，我們經常經常用到，這些技術不僅僅限於圖片加載，我們今天討論的是圖片加載：
圖片預加載：顧名思義，圖片預加載就是在網頁全部加載之前，提前加載圖片。當用戶需要查看時可直接從本地緩存中渲染，以提供給用戶更好的體驗，減少等待的時間。否則，如果一個頁面的內容過於龐大，沒有使用預加載技術的頁面就會長時間的展現為一片空白，這樣瀏覽者可能以為圖片預覽慢而沒興趣瀏覽，把網頁關掉，這時，就需要圖片預加載。當然這種做法實際上犧牲了服務器的性能換取了更好的用戶體驗。
圖片懶加載（緩載）：延遲加載圖片或符合某些條件時才加載某些圖片。這樣做的好處是減少不必要的訪問數據庫或延遲訪問數據庫的次數，因為每次訪問數據庫都是比較耗時的即只有真正使用該對象的數據時才會創建。懶加載的主要目的是作為服務器前端的優化，減少請求數或延遲請求數。
二、圖片預加載與懶加載的區別：
兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預載則會增加服務器前端壓力。
預加載
if (document.images) {
console.log(document.images)
img1 = new Image();
img2 = new Image();
img3 = new Image();
console.log(img1, img2, img3)
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
document.getElementById('one').src = img1.src
直接new image（）圖片對象，
img1 = new Image();
img2 = new Image();
img3 = new Image();
然后把地址放在圖片對象上 （圖片對象 img1 img2 img3）
img1.src = "./images/logo.png";
img2.src = "./images/coding-net-ad.jpg";
img3.src = "./images/coding-net-ad.jpg";
最后 把頁面圖片上的地址修改為圖片對象上的地址就可以了，實現預加載不用每次都加載請求了。
封裝使用 延遲預加載時間，知道頁面加載結束，上訴代碼封裝后，判斷是否window.onload是否結束，結束接調用函數即可。
懶加載js原生實現
獲取圖片，滾動事件中計算圖片的位置，如果在可視區域，在實現存放在img標簽上的圖片路徑賦值到img標簽的src上即可。
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") == "") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
懶加載 (利用插件實現)
vue-lazyload懶加載插件
1.安裝插件
npm install vue-lazyload --save
2.引用文件，一般在main.js全局引用，且配置好圖片
3.在入口文件添加后，在組件任何地方都可以直接使用把 img 里的:src -> v-lazy
