概念

IntersectionObserver接口(從屬于Intersection Observer API)為開發(fā)者提供了一種可以異步監(jiān)聽目標(biāo)元素與其祖先或視窗(viewport)交叉狀態(tài)的手段。祖先元素與視窗(viewport)被稱為根(root)。

這是MDN上給的官方概念，不用去管它，我粘出來只是為了顯得專業(yè)點(diǎn)嘛...

重點(diǎn)看這里 監(jiān)聽目標(biāo)元素與其祖先或視窗交叉狀態(tài)的手段 ，其實(shí)就是觀察一個元素是否在視窗可見。

可以看到，交叉了就是說明當(dāng)前元素在視窗里，當(dāng)前就是可見的了。

API

var io = new IntersectionObserver(callback, options)

其實(shí)就是一個簡單的構(gòu)造函數(shù)。

以上代碼會返回一個 IntersectionObserver 實(shí)例， callback 是當(dāng)元素的可見性變化時候的回調(diào)函數(shù)， options 是一些配置項(xiàng)（可選）。

我們使用返回的這個實(shí)例來進(jìn)行一些操作。

io.observe(document.querySelector('img')) 開始觀察，接受一個DOM節(jié)點(diǎn)對象
io.unobserve(element) 停止觀察 接受一個element元素
io.disconnect() 關(guān)閉觀察器

options

root

用于觀察的根元素，默認(rèn)是瀏覽器的視口，也可以指定具體元素，指定元素的時候用于觀察的元素必須是指定元素的子元素

threshold

用來指定交叉比例，決定什么時候觸發(fā)回調(diào)函數(shù)，是一個數(shù)組，默認(rèn)是 [0] 。

const options = {
	root: null,
	threshold: [0, 0.5, 1]
}
var io = new IntersectionObserver(callback, options)
io.observe(document.querySelector('img'))

上面代碼，我們指定了交叉比例為0，0.5，1，當(dāng)觀察元素img0%、50%、100%時候就會觸發(fā)回調(diào)函數(shù)

rootMargin

用來擴(kuò)大或者縮小視窗的的大小，使用css的定義方法， 10px 10px 30px 20px 表示top、right、bottom 和 left的值

const options = {
	root: document.querySelector('.box'),
	threshold: [0, 0.5, 1],
	rootMargin: '30px 100px 20px'
}

為了方便理解，我畫了張圖，如下

首先我們來看下圖上的問題，藍(lán)線是什么呢？他就是咱們定義的root元素，我們添加了 rootMargin 屬性，將視窗的增大了，虛線就是現(xiàn)在的視窗，所以元素現(xiàn)在也就在視窗里面了。

由此可見，root元素只有在 rootMargin 為空的時候才是絕對的視窗。

說了簡單的options，接下來我們看下 callback 。

callback

上面我們說到，當(dāng)元素的可見性變化時，就會觸發(fā)callback函數(shù)。

callback函數(shù)會觸發(fā)兩次，元素進(jìn)入視窗（開始可見時）和元素離開視窗（開始不可見時）都會觸發(fā)

var io = new IntersectionObserver((entries)=>{
	console.log(entries)
})

io.observe($0)

以上代碼，請?jiān)赾hrome控制臺進(jìn)行調(diào)試，這里我使用了 $0 選擇了上一次我審查元素的選擇的節(jié)點(diǎn)

運(yùn)行結(jié)果如下

我們可以看到callback函數(shù)有個 entries 參數(shù)，它是個 IntersectionObserverEntry 對象數(shù)組，接下來我們重點(diǎn)說下IntersectionObserverEntry對象

IntersectionObserverEntry

IntersectionObserverEntry 提供觀察元素的信息，有七個屬性。

boundingClientRect 目標(biāo)元素的矩形信息 intersectionRatio 相交區(qū)域和目標(biāo)元素的比例值 intersectionRect/boundingClientRect 不可見時小于等于0 intersectionRect 目標(biāo)元素和視窗（根）相交的矩形信息 可以稱為相交區(qū)域 isIntersecting 目標(biāo)元素當(dāng)前是否可見 Boolean值 可見為true rootBounds 根元素的矩形信息，沒有指定根元素就是當(dāng)前視窗的矩形信息 target 觀察的目標(biāo)元素 time 返回一個記錄從 IntersectionObserver 的時間到交叉被觸發(fā)的時間的時間戳

上面幾個矩形信息的關(guān)系如下

劃重點(diǎn)

intersectionRatio和 isIntersecting 是用來判斷元素是否可見的，押題咯...

懶加載

好了，通過上面一些概念我們大概了解了 IntersectionObserver 是個什么東西，接下來我們用它來寫點(diǎn)代碼，寫什么呢？沒錯就是懶加載。

通過IntersectionObserver來實(shí)現(xiàn)懶加載，就簡單的多了，我們只需要設(shè)置回調(diào)，判斷當(dāng)前元素是否可見，再進(jìn)行渲染操作就行了，而不用去關(guān)心內(nèi)部的計(jì)算。

主要代碼如下

const io = new IntersectionObserver(()=>{ // 實(shí)例化 默認(rèn)基于當(dāng)前視窗
	
}) 

let ings = document.querySelectorAll('[data-src]') // 將圖片的真實(shí)url設(shè)置為data-src src屬性為占位圖 元素可見時候替換src

function callback(entries){ 
	entries.forEach((item) => { // 遍歷entries數(shù)組
		if(item.isIntersecting){ // 當(dāng)前元素可見
			item.target.src = item.target.dataset.src // 替換src
			io.unobserve(item.target) // 停止觀察當(dāng)前元素 避免不可見時候再次調(diào)用callback函數(shù)
		}	
	})
}

imgs.forEach((item)=>{ // io.observe接受一個DOM元素，添加多個監(jiān)聽 使用forEach
	io.observe(item)
})

本想錄制個GIF圖，使用Recordlt始終上傳不了，誰有好用的GIF圖錄制軟件請推薦個，不勝感激。。

吶，給你花:rose:

因篇幅有限，完整代碼請戳 github

注意

目前IntersectionObserver是一個實(shí)驗(yàn)中的功能，請酌情使用。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論