手把手教你實(shí)現(xiàn)圖片懶加載

// 在一開始加載的時候

// 在進(jìn)入可視范圍內(nèi)時

實(shí)現(xiàn)一個懶加載

基于上面的實(shí)現(xiàn)思路，自己實(shí)現(xiàn)一個懶加載。

新建一個 index.html?中，為這些圖片預(yù)置 img 標(biāo)簽：

在懶加載的實(shí)現(xiàn)中，有兩個關(guān)鍵的數(shù)值：一個是當(dāng)前可視區(qū)域的高度，另一個是元素距離可視區(qū)域頂部的高度。

當(dāng)前可視區(qū)域的高度，在現(xiàn)代瀏覽器及 IE9 以上的瀏覽器中，可以使用window.innerHeight屬性獲取，在低版本的 IE 中使用document.documentElment.clientHeight 獲取，這里我們兼容兩種情況：

const viewHeight = window.innerHeight || document.documentElement.clientHeight;

而元素距離可視區(qū)域頂部的高度，這里我們用 getBoundingClientRect()方法來獲取返回元素的大小和相對于尺寸的位置，對于該 API，MDN 的解釋是：

Element.getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置。

返回的屬性中有一個相對于可視區(qū)域頂部的高度也就是top屬性，剛好就是我們需要的元素距離頂部的距離。

這樣，兩個屬性就都得到了。

我們利用當(dāng)前可視區(qū)域的高度大于等于元素距離可視區(qū)域頂部的高度就可以確定，該元素是否已經(jīng)進(jìn)入到了可視范圍：

小結(jié)

1. 先收集到頁面中所有的img(也可以用class)。

2. 獲取到視圖高度，計(jì)算顯示的img，避免重復(fù)賦值src。

3. 當(dāng)滑動向下滑動鼠標(biāo)，會觸發(fā)onScroll事件(防抖)，然后觸發(fā)計(jì)算是否賦值src。