使用IntersectionObserver 實現懶加載 && 記錄一個懶加載失效的原因

先說說我實現懶加載失效的一個原因：

是圖片沒有寫高度

猜想是沒有給圖片高度，所以底層沒法進行計算 容器是否出現在視圖中

 

實現一個IntersectionObserver

// 配置參數請看下面
const config = {
    root: null,
    rootMargin: '0px',
    threshold: 0
}
const io = new IntersectionObserver(
  callback,
  config
)

 

上面配置config的屬性：

1. root：視圖根節點，不填默認爲瀏覽器窗口
2. rootMargin：縮小或擴大根元素的區域，默認值爲"0px 0px 0px 0px"，只能用px或百分比
3. threshold：可以給0 - 1 之間的數  0 元素剛進入窗口  1 完全進入窗口

 

IntersectionObserver 提供的api

• 指定觀察哪個DOM節點

io.observe(element)

• 停止對某個節點的觀察

io.unobserve(element)

• 關閉觀察器，停止觀察服務

io.disconnect()