IntersectionObserver：下篇-實際應用 lazyload、進場效果、無限捲動

使用資源

接續上一篇的IntersectionObserver基本使用（以下簡稱IO），本篇來寫三個實際應用。

本篇用到的資源如下：

UI framewrok：Bootstrap4

css animation：animate.css

無限捲動的資料：JSONPlaceholder

lazy load 延遲載入（圖片、影片）

IO最基本的應用就是延遲載入lazy load了，如果google一下大部份也都是拿lazy load來當示範。

lazy load的概念是這樣：

1. img的src不填，改填 data-src="圖片路徑"
2. 當img的區塊出現在視窗上後，把 data-src 的值寫入到 src 裡

以前對於「當img的區塊出現在視窗上」，大概就是用 onscroll 來監聽，現在有了IO，就可以放下onscroll讓它成佛了。

因為概念就是XX區塊出現在視窗時，就替換src，所以除了img，也可以用成youtube iframe。

HTML

html很簡單：

JavaScript

JS的部份…好吧，如果上一篇有看，也真的很簡單XD~ 如下：

一個神奇的狀況（坑？）

話說在寫範例的時候，遇到了一個狀況，就是IO的rootMargin這個參數。

rootMargin，MDN上說：

計算交叉時添加到根(root)邊界盒bounding box的矩形偏移量，可以有效的縮小或擴大根的判定範圍從而滿足計算需要。

Intersection Observer

是不是看不懂？對，我也看不懂，原本Augustus的理解是，rootMargin是一個可以放大、縮小觀察器的鏡頭大小的參數，比方我的螢幕是13寸，但我想把觀察的範圍拉大到15寸，我就在rootMargin上加大。

想像很美好，現實很殘酷，實際要做的時候，原本是想把鏡頭往上移螢幕大小的一半，讓img的部份出現在螢幕的一半時，才執行callback。

結果，Augustus發現即便改便了rootMargin，但卻一樣是img一出現在螢幕上，就執行callback了。

google了一下，發現也有人有遇到這問題，但還沒有人提供解答：

IntersectionObserver rootMargin’s positive and negative values are not working

這個發現Augustus更新到上篇中了，懇請知道原因的大大可以在留言區中留言。

lazy load的完整原始碼跟Demo會附在最後一段。

進場效果

進場效果的思考方式其實跟lazy load很像，不一樣的是，lazy load是img出現在視窗時就替換src。而進場效果則是區塊進入到視窗時，就把class name加進去。

是不是會了IntersectionObserver，就等於會了很多功能？

HTML

本篇效果直接用animate.css的，就不另外手刻，因此只需要把class name寫在data-animated，然後用JS加進去。

JavaScript

JS的部份跟lazy load很像，基本上就是ctrl C、ctrl V後再改個變數名（咦？）

進場效果的完整原始碼跟Demo會附在最後一段。

無限捲動

先聲明，Augustus是很不接受無限捲動這個方式的，除非你的網頁架構跟FB、IG、Twitter等社群一樣，架構扁平，沒有一般網站的首頁 > 列表 > 單文 這樣的層次，而且每張卡片的html都不長。

之前看過一篇，是在說明並非每個站都適合無限滾動的：

Infinite Scrolling Is Not for Every Website

但不知道為什麼，最近身邊人一窩蜂的都想要這功能，是只打算把自己的網站當作FB那樣消遣用的就是了。

本篇的無限滾動，是像FB那樣子，頁面每捲到底，就會多載入一張卡片進來。

HTML

因為實際上的卡片都是由JS塞進去的，所以html很單純：

分成2個div，一個是要給塞卡片的，一個是觸發IO callback的。

JavaScript

JS的部份，Augustus這邊寫最多載入10篇，10篇一到就關閉IO。

另外很有趣的是，因為insert新的html，是insert在IO觀察的那個div之上，所以即便是新增了code進去，IO.observe也不必再重呼一次，因為目標就一直待在頁尾的部份。

原始碼、Demo

本篇的3個實作項目的Demo在這，全部都寫在同一頁：

https://letswritetw.github.io/letswrite-intersection-observer/

原始碼的部份整理在Github：

https://github.com/letswritetw/letswrite-intersection-observer

Summary

Article Name

IntersectionObserver：下篇-實際應用 lazyload、進場效果、無限捲動

Description

本篇大綱：使用資源。lazy load 延遲載入（圖片、影片）、一個神奇的狀況（坑？）。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用（以下簡稱IO），本篇來寫三個實際應用。本篇的無限滾動，是像FB那樣子，頁面每捲到底，就會多載入一張卡片進來。

Augustus

Augustus

Let's Write

Let's Write

https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg