懶加載(Lazy-Load)。它是針對圖檔加載時機的優化：在一些圖檔量比較大的網站（比如電商網站首頁，或者團購網站、小遊戲首頁等），如果我們嘗試在使用者打開頁面的時候，就把所有的圖檔資源加載完畢，那麼很可能會造成白屏、卡頓等現象，因為圖檔真的太多了，一口氣處理這麼多任務，浏覽器做不到啊！
目的
懶加載 的目的是當頁面的圖檔進入到使用者的可視範圍之内在加載圖檔的一種優化方式。
可以增加首屏加載的速度，畢竟，使用者點開頁面的瞬間，呈現給他的隻是首屏，我們隻要把首屏的資源圖檔加載處理就可以了，至于下面的圖檔，當使用者下滑當目前位置的時候，在加載出來也是沒問題的，對于性能壓力也小了，使用者體驗也沒有變差。
原理
在頁面初始化的時候，<img>圖檔的src實際上是放在data-src屬性上的，當元素處于可視範圍内的時候，就把data-src指派給src屬性，完成圖檔加載。
// 在一開始加載的時候
<img src="http://xx.com/xx.png" src="" />
// 在進入可視範圍内時
<img src="http://xx.com/xx.png" src="http://xx.com/xx.png" /> <div>使用背景圖來實作，原理也是一樣的，把background-image放在，在可視範圍時，就把data-src指派給src屬性，完成圖檔加載。
// 在一開始加載的時候
<div src="http://xx.com/xx.png" style="background-image: none;background-size: cover;"></div>
// 在進入可視範圍内時
<div src="http://xx.com/xx.png" style="background-image: url(http://xx.com/xx.png);background-size: cover;"></div> 實作一個懶加載
基于上面的實作思路，自己實作一個懶加載。
建立一個 index.html 中，為這些圖檔預置 img 标簽：
<head>
<style>
.img {
width: 200px;
height: 200px;
background-color: gray;
margin-bottom: 20px;
}
.pic {
width: 100%;
height: 100%;
}
</style>
</head>
<!-- 圖檔來自網絡，侵删。 -->
<body>
<div class="container">
<div class="img">
<!-- 注意我們并沒有為它引入真實的src -->
<img class="pic" alt="加載中" src="https://tse1-mm.cn.bing.net/th/id/OIP.8OrEFn_rKe82kqAWFjTuMwHaEo?pid=Api&rs=1"/>
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://ssl.tzoo-img.com/images/tzoo.94911.0.910013.seoul-nami.jpg?width=1080" />
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://tse4-mm.cn.bing.net/th/id/OIP.ZitgAuABnwkrGn4lid2ZmQHaEK?pid=Api&rs=1" />
</div>
<div class="img">
<img class="pic" alt="加載中" src="http://pic34.photophoto.cn/20150315/0034034862056002_b.jpg" />
</div>
<div class="img">
<img class="pic" alt="加載中" src="http://img.mp.sohu.com/upload/20170724/32d4409f34194b029ed287abf1c99b70_th.png"/>
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://pic6.wed114.cn/20180829/2018082910075991913520.jpg"/>
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://tse4-mm.cn.bing.net/th/id/OIP.PZdPKj3sXEX2jLrepx3MUwHaEo?pid=Api&rs=1"/>
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://pic6.wed114.cn/20180829/2018082910075831439349.jpg" />
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://pic6.wed114.cn/20180829/2018082910075468043336.jpg"/>
</div>
<div class="img">
<img class="pic" alt="加載中" src="https://tse2-mm.cn.bing.net/th/id/OIP.CRYz5Bv4vylsMh83G4CsLgHaFj?pid=Api&rs=1"/>
</div>
</div>
</body> 在懶加載的實作中，有兩個關鍵的數值：一個是目前可視區域的高度，另一個是元素距離可視區域頂部的高度。
目前可視區域的高度，在現代浏覽器及 IE9 以上的浏覽器中，可以使用window.innerHeight屬性擷取，在低版本的 IE 中使用document.documentElment.clientHeight 擷取，這裡我們相容兩種情況：
const viewHeight = window.innerHeight || document.documentElement.clientHeight; 而元素距離可視區域頂部的高度，這裡我們用 getBoundingClientRect()方法來擷取傳回元素的大小和相對于尺寸的位置，對于該 API，MDN 的解釋是：
Element.getBoundingClientRect() 方法傳回元素的大小及其相對于視口的位置。
傳回的屬性中有一個相對于可視區域頂部的高度也就是top屬性，剛好就是我們需要的元素距離頂部的距離。
這樣，兩個屬性就都得到了。
我們利用目前可視區域的高度大于等于元素距離可視區域頂部的高度就可以确定，該元素是否已經進入到了可視範圍：
<script>
// 擷取所有的圖檔标簽
const imgs = document.getElementsByTagName("img");
// 擷取可視區域的高度
const viewHeight =
window.innerHeight || document.documentElement.clientHeight;
// num用于統計目前顯示到了哪一張圖檔，避免每次都從第一張圖檔開始檢查是否露出
let num = 0;
function lazyload() {
console.log("滾動...");
for (let i = num; i < imgs.length; i++) {
// 用可視區域高度減去元素頂部距離可視區域頂部的高度
let distance = viewHeight - imgs[i].getBoundingClientRect().top;
// 如果可視區域高度大于等于元素頂部距離可視區域頂部的高度，說明元素露出
if (distance >= 0) {
// 給元素寫入真實的src，展示圖檔
imgs[i].src = imgs[i].getAttribute("data-src");
// 前i張圖檔已經加載完畢，下次從第i+1張開始檢查是否露出
num = i + 1;
}
}
}
// 防抖函數
function debounce(fn, delay = 500) {
let timer = null;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.call(this, args);
}, delay);
};
}
// 是的頁面初始化是加載首屏圖檔
window.onload = lazyload;
// 監聽Scroll事件，為了防止頻繁調用，使用防抖函數優化一下
window.addEventListener("scroll", debounce(lazyload, 600), false);
</script> 小結
- 先收集到頁面中所有的img(也可以用class)。
- 擷取到視圖高度，計算顯示的img，避免重複指派src。
- 當滑動向下滑動滑鼠，會觸發onScroll事件(防抖)，然後觸發計算是否指派src。
本文完~