This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const imageContainer = document.querySelector('.image-container') | |
const imageList = document.querySelector('.image-list') | |
// 選到目標元素 | |
const loadingObserver = document.querySelector('.observer') | |
// 每次載入的圖片數量 | |
const IMAGE_PER_PAGE = 3 | |
// 每次要取得圖片的頁碼 | |
let page = 1 | |
// 設定在什麼情況下觸發 callback 函式 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--用來觀察的盒子 root--> | |
<div class="image-container"> | |
<ul class="image-list"> | |
<!--透過 JS 動態將照片載進來--> | |
</ul> | |
<!--觀察對象--> | |
<div class="observer"></div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 選到頁面中帶有 data-src 屬性的所有元素 | |
const images = document.querySelectorAll('[data-src]') | |
// 設定在什麼情況下觸發 callback 函式 | |
const options = { | |
rootMargin: '0px 0px 50px 0px', | |
threshold: 0 | |
} | |
// 載入圖片的函式 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<img class="image" data-src="https://images.pexels.com/"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let callback = (entries, observer) => { | |
entries.forEach(entry => { | |
if (entry.isIntersecting) { | |
// 目標元素進入 viewport 時做一些事情 | |
... | |
// 完成後,停止觀察當前目標 | |
observer.unobserve(entry.target) | |
} | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let callback = (entries, observer) => { | |
entries.forEach(entry => { | |
if (entry.isIntersecting) { | |
// 只在目標元素進入 viewport 時執行這裡的工作 | |
} else { | |
// 只在目標元素離開 viewport 時執行這裡的工作 | |
} | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 響鈴條件:設定和控制在哪些情況下,呼叫 callback 函式 | |
let options = {} | |
// 條件達成做什麼:符合設定條件下,目標進入或離開 viewport 時觸發此 callback 函式 | |
let callback = (entries, observer) => { | |
// entries 能拿到所有目標元素進出(intersect)變化的資訊 | |
entries.forEach(entry => { | |
// 取得每個 entry 資訊做一些處理或工作 | |
}) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 選定頁面上多個狗圖片 | |
const dogImages = document.querySelectorAll('.dog-img') | |
// 透過迴圈設定觀察 | |
dogImages.forEach(image => observer.observe(image)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 選定要觀察的對象 | |
const dogImage = document.querySelector('.dog-img') | |
// 設定觀察 | |
observer.observe(dogImage) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let observer = new IntersectionObserver(callback, options) |
NewerOlder