内容
- 為什麼需要懶加載
- 監控滾動條實作懶加載
-
- 思路
- 代碼
- 監控滾動條方法的弊端
- Intersection Observer實作懶加載
為什麼需要懶加載
圖檔懶加載其實就是延遲加載，我們知道浏覽器的可視範圍是有限的，現在網頁的内容日益豐富，一般網頁内容都需要進行滾動才能完成浏覽
如果網頁有很多圖檔，然而圖檔非常吃流量，如果使用者還沒看到網頁下面的内容，在某種程度上我們就沒有必要這麼快加載這些看不見的圖檔
監控滾動條實作懶加載
思路
監聽window的滾動事件(scroll)
需要知道兩個高度：
1.視窗顯示區的高度，可以用
window.innerHeight
擷取
2.圖檔到視窗顯示區頂部的距離，可以用
getBoundingClientRect().top
擷取
如果圖檔可以看見，說明圖檔到視窗顯示區頂部的距離小于視窗顯示區的高度
一開始将圖檔的
src
屬性寫成
data-src
，這樣一開始浏覽器不知道在哪裡下載下傳這些圖檔，就顯示不出來
當滿足圖檔可以被看見的時候，就擷取到
data-src
的值賦給圖檔的
src
屬性
代碼
html部分：
用p标簽占位出現滾動條，圖檔的路徑存在
data-src
中
css部分就是圖檔一定要設定高度
js部分：
圖檔懶加載問題到這就實作了——————
監控滾動條方法的弊端
現在我們看下控制台，發現滾動事件執行了太多次
這時候就可以把我們的節流函數拿過來用
關于節流就不做過多闡述了，可以看我之前這篇整理的文章https://blog.csdn.net/gegegegege12/article/details/119062305
現在好多了🙏
但是當圖檔加載完之後，我們繼續滾動，滾動事件還是會繼續執行
是以要介紹一種更好的方法
IntersectionObserver
Intersection Observer實作懶加載
Intersection Observer
是浏覽器提供的構造函數，字面意思就是交叉觀察，目标元素和可視視窗會産生交叉區域，觀察交叉區域發生了什麼事情
因為是構造函數，需要new一個執行個體，這個執行個體可以了解為一個用于觀察的執行個體
進行觀察：
取消觀察：
在這裡也就是說當圖檔被加載出來之後，就沒必要繼續觀察了
IntersectionObserver
可以接收一個回調函數，裡面寫一些觀察這個DOM節點的時候要進行的一些動作，這個回調函數觸發兩次：能看見目标元素了觸發一次，看不見目标元素了再觸發一次
代碼部分：
接下來應該要完成回調函數裡的内容，上面說了回調函數會在觀察的元素能看到和看不到的時候觸發，但是現在問題在于我們并不知道回調函數觸發的時候，圖檔到底是看見了還是看不見了
那麼回調函數是接收一個參數的，這個參數是一個數組，我們用
entries
來表示，嘗試在控制台輸出這個數組
因為有7張圖檔，是以數組長度為7
其中
isIntersecting
是我們要關注的屬性，意思是“是否交叉”，也就是是否進行到可視區域，還沒滾動到圖檔區域之前，這個值是
false
，當滾動到圖檔區域，圖檔可以看見時這個值就變為
true
，于是我們可以利用這個屬性來判斷觸發回調函數時是否觀察到了圖檔
對于哪一張圖檔觸發了此次回調函數，我們還可以利用
target
屬性來判斷此次觸發回調函數的是哪一張圖檔
當圖檔加載完之後，我們就可以用
observer.unobserve(DOM節點);
取消觀察圖檔的動作
我們發現這個回調函數僅觸發了7次，并且圖檔加載完畢後随意亂滾是不會再次觸發回調函數的
完