上一篇給大家講了IntersectionObserver判斷是否可見，這個還可以用來實現(xiàn)懶加載，首先說一下懶加載的原理，我們先使用一個自定義屬性data-src來代替src這個屬性，因為src這個屬性值是空的，所以在網(wǎng)站加載的時候并不會被加載，而當該圖片進入視窗內(nèi)時，把data-src這個屬性的內(nèi)容賦給src，此時src擁有了值， 這個時候圖片才會加載，對于隱藏圖片較多的動態(tài)網(wǎng)站，這個是一個必須的優(yōu)化。

判斷是否可見有兩種方法，第一種是intersectionObserrver這個api，還有利用jq判斷滾動的距離。

具體怎么判斷不多贅述，簡單來說我們利用intersectionOserver這個api的返回值的數(shù)組中的isIntersecting來判斷是否在視窗內(nèi)，這個api內(nèi)部函數(shù)支持使用jq。

首先，我們來獲取到整個頁面的img標簽的內(nèi)容，如果對某些圖片不想使用懶加載的，也可以獲取某個class類名

其次，開啟對這些圖片的監(jiān)聽。

最后，我們判斷isintersecting這個屬性，，當這個屬性變?yōu)閠rue意為進入了視窗中，然后我們通過target拿到這個標簽，最后把自定義屬性data-src的屬性賦給src，最后，為了防止用戶重復滾動反復觸發(fā)該函數(shù)，我們最后停止監(jiān)聽已經(jīng)加載完的圖片

測試被打印了46次，當我向下滾動時。

又額外加載了20張。