怎么通過IntersectionObserver實(shí)現(xiàn)懶加載
本篇內(nèi)容主要講解“怎么通過IntersectionObserver實(shí)現(xiàn)懶加載”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么通過IntersectionObserver實(shí)現(xiàn)懶加載”吧!
通常懶加載等都會通過監(jiān)聽scroll事件用getBoundingClientRect()來判斷元素位置來決定是否可以開始加載。性能開銷是比較大的，為了節(jié)省性能又需要各種操作去彌補(bǔ)，例如用節(jié)流來減少判斷次數(shù)等。
IntersectionObserver API可以完全省去這些操作，只需要簡單的讀取即可。
示例
new IntersectionObserver(callBack, options);
let options = {
root: null, // 相對的根元素，null為視口
threshold: 1.0 //重疊率 0.0-1.0（完全重疊即完全進(jìn)入root元素） 重疊率達(dá)到要求后觸發(fā)事件
},
callBack = (entries, observer) => { // entries 數(shù)組，包含所有的被觀察者
entries.forEach(entry => {
// isIntersecting 即是否重疊
entry.target.innerText = entry.isIntersecting ? '加載~~~~': '不可見';
})
},
observer = new IntersectionObserver(callBack, options);
let observedList = document.querySelectorAll('h2');
observedList.forEach(element => {
observer.observe(element)
});options 配置項(xiàng)
傳遞到 IntersectionObserver() 構(gòu)造函數(shù)的 options 對象，允許您控制觀察者的回調(diào)函數(shù)的被調(diào)用時的環(huán)境。它有以下字段：
指定根(root)元素，用于檢查目標(biāo)的可見性。必須是目標(biāo)元素的父級元素。如果未指定或者為null，則默認(rèn)為瀏覽器視窗。
根(root)元素的外邊距。類似于 CSS 中的 margin 屬性，比如 “10px 20px 30px 40px” (top, right, bottom, left)。如果有指定 root 參數(shù)，則 rootMargin 也可以使用百分比來取值。該屬性值是用作 root 元素和 target 發(fā)生交集時候的計(jì)算交集的區(qū)域范圍，使用該屬性可以控制 root 元素每一邊的收縮或者擴(kuò)張。默認(rèn)值為0。
可以是單一的 number 也可以是 number 數(shù)組，target 元素和 root 元素相交程度達(dá)到該值的時候 IntersectionObserver 注冊的回調(diào)函數(shù)將會被執(zhí)行。如果你只是想要探測當(dāng) target 元素的在 root 元素中的可見性超過50%的時候，你可以指定該屬性值為0.5。如果你想要 target 元素在 root 元素的可見程度每多25%就執(zhí)行一次回調(diào)，那么你可以指定一個數(shù)組 [0, 0.25, 0.5, 0.75, 1]。默認(rèn)值是0 (意味著只要有一個 target 像素出現(xiàn)在 root 元素中，回調(diào)函數(shù)將會被執(zhí)行)。該值為1.0含義是當(dāng) target 完全出現(xiàn)在 root 元素中時候 回調(diào)才會被執(zhí)行。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 24px;
}
</style>
</head>
<body>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<h2>不可見</h2>
<h5>不可見</h5>
<script>
let options = {
root: null, // 根元素，null為視口
threshold: 1.0 //重疊率 0.0-1.0 重疊率達(dá)到要求后觸發(fā)事件
},
callBack = (entries, observer) => {
entries.forEach(entry => {
entry.target.innerText = entry.isIntersecting ? '測試': '不可見';
})
},
observer = new IntersectionObserver(callBack, options);
let observedList = document.querySelectorAll('h2');
observedList.forEach(element => {
observer.observe(element)
});
</script>
</body>
</html>到此，相信大家對“怎么通過IntersectionObserver實(shí)現(xiàn)懶加載”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
