smallpaes

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 函式

smallpaes

<!--用來觀察的盒子 root-->
<div class="image-container">
  <ul class="image-list">
    <!--透過 JS 動態將照片載進來-->
  </ul>
  <!--觀察對象-->
  <div class="observer"></div>
</div>

smallpaes

// 選到頁面中帶有 data-src 屬性的所有元素
const images = document.querySelectorAll('[data-src]')

// 設定在什麼情況下觸發 callback 函式
const options = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
}

// 載入圖片的函式

smallpaes

<img class="image" data-src="https://images.pexels.com/">

smallpaes

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      //  目標元素進入 viewport 時做一些事情
      ...
      // 完成後，停止觀察當前目標
      observer.unobserve(entry.target)
    } 
  })
}

smallpaes

let callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      //  只在目標元素進入 viewport 時執行這裡的工作
    } else {
      // 只在目標元素離開 viewport 時執行這裡的工作
    }
  })
}

smallpaes

// 響鈴條件：設定和控制在哪些情況下，呼叫 callback 函式
let options = {}

// 條件達成做什麼：符合設定條件下，目標進入或離開 viewport 時觸發此 callback 函式
let callback = (entries, observer) => {
  // entries 能拿到所有目標元素進出(intersect)變化的資訊
  entries.forEach(entry => {
    // 取得每個 entry 資訊做一些處理或工作
  })
}

smallpaes

// 選定頁面上多個狗圖片
const dogImages = document.querySelectorAll('.dog-img')
// 透過迴圈設定觀察
dogImages.forEach(image => observer.observe(image))

smallpaes

//  選定要觀察的對象
const dogImage = document.querySelector('.dog-img')
// 設定觀察
observer.observe(dogImage)

smallpaes

let observer = new IntersectionObserver(callback, options)