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

判斷是否可見(jiàn)有兩種方法，第一種是intersectionObserrver這個(gè)api，還有利用jq判斷滾動(dòng)的距離。

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

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

其次，開(kāi)啟對(duì)這些圖片的監(jiān)聽(tīng)。

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

測(cè)試被打印了46次，當(dāng)我向下滾動(dòng)時(shí)。

又額外加載了20張。