intersectionObserver是一個(gè)實(shí)用的web api,可以用來(lái)監(jiān)控指定元素和視窗有交互時(shí)發(fā)生的回調(diào)奇昙,說(shuō)白了就是當(dāng)頁(yè)面里的某個(gè)元素進(jìn)入瀏覽器屏幕或者離開(kāi)時(shí)候你想干嘛护侮,這個(gè)特性極適合實(shí)現(xiàn)懶加載(也可以監(jiān)聽(tīng)頁(yè)面scroll事件,這是另一種方法)储耐。
給所有的圖片一個(gè)data-src保存圖片真正的鏈接
var img = document.querySelectorAll('[data-src]')
var iso=new IntersectionObserver(callfn)
function callfn(entries){
? ??entries.forEach((item)=>{
????????if(item.isIntersecting){
????????????item.target.src=item.target.dataset.src
????????????iso.unobserve(item.target)
????????}
????})
}
imgs.forEach((item)=>{
????iso.observe(item)
})