溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么通過IntersectionObserver實現懶加載”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么通過IntersectionObserver實現懶加載”吧!
通常懶加載等都會通過監聽scroll事件用getBoundingClientRect()來判斷元素位置來決定是否可以開始加載。性能開銷是比較大的，為了節省性能又需要各種操作去彌補，例如用節流來減少判斷次數等。
IntersectionObserver API可以完全省去這些操作，只需要簡單的讀取即可。
new IntersectionObserver(callBack, options);
let options = {
root: null, // 相對的根元素，null為視口
threshold: 1.0 //重疊率 0.0-1.0（完全重疊即完全進入root元素） 重疊率達到要求后觸發事件
},
callBack = (entries, observer) => { // entries 數組，包含所有的被觀察者
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)
});傳遞到 IntersectionObserver() 構造函數的 options 對象，允許您控制觀察者的回調函數的被調用時的環境。它有以下字段：
root
指定根(root)元素，用于檢查目標的可見性。必須是目標元素的父級元素。如果未指定或者為null，則默認為瀏覽器視窗。
rootMargin
根(root)元素的外邊距。類似于 CSS 中的 margin 屬性，比如 “10px 20px 30px 40px” (top, right, bottom, left)。如果有指定 root 參數，則 rootMargin 也可以使用百分比來取值。該屬性值是用作 root 元素和 target 發生交集時候的計算交集的區域范圍，使用該屬性可以控制 root 元素每一邊的收縮或者擴張。默認值為0。
threshold
可以是單一的 number 也可以是 number 數組，target 元素和 root 元素相交程度達到該值的時候 IntersectionObserver 注冊的回調函數將會被執行。如果你只是想要探測當 target 元素的在 root 元素中的可見性超過50%的時候，你可以指定該屬性值為0.5。如果你想要 target 元素在 root 元素的可見程度每多25%就執行一次回調，那么你可以指定一個數組 [0, 0.25, 0.5, 0.75, 1]。默認值是0 (意味著只要有一個 target 像素出現在 root 元素中，回調函數將會被執行)。該值為1.0含義是當 target 完全出現在 root 元素中時候 回調才會被執行。
<!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 重疊率達到要求后觸發事件
},
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實現懶加載”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
