這篇文章給大家分享的是有關IntersectionObserver懶加載怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都網(wǎng)站制作、成都做網(wǎng)站服務團隊是一支充滿著熱情的團隊，執(zhí)著、敏銳、追求更好，是創(chuàng)新互聯(lián)的標準與要求，同時竭誠為客戶提供服務是我們的理念。成都創(chuàng)新互聯(lián)公司把每個網(wǎng)站當做一個產(chǎn)品來開發(fā)，精雕細琢，追求一名工匠心中的細致，我們更用心！

概念

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

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

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

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

API

var io = new IntersectionObserver(callback, options)

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

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

我們使用返回的這個實例來進行一些操作。

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

options

root

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

threshold

用來指定交叉比例，決定什么時候觸發(fā)回調(diào)函數(shù)，是一個數(shù)組，默認是 [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，當觀察元素img0%、50%、100%時候就會觸發(fā)回調(diào)函數(shù)

rootMargin

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

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

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

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

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

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

callback

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

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

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

io.observe($0)

以上代碼，請在chrome控制臺進行調(diào)試，這里我使用了 $0 選擇了上一次我審查元素的選擇的節(jié)點

運行結果如下

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

IntersectionObserverEntry

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

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

上面幾個矩形信息的關系如下

劃重點

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

懶加載

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

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

主要代碼如下

const io = new IntersectionObserver(()=>{ // 實例化 默認基于當前視窗
	
}) 

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

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

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

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

吶，給你花:rose:

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

注意

目前IntersectionObserver是一個實驗中的功能，請酌情使用。

感謝各位的閱讀！關于“IntersectionObserver懶加載怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：IntersectionObserver懶加載怎么用-創(chuàng)新互聯(lián)
分享鏈接：http://weahome.cn/article/djcish.html