本篇大綱
使用資源
接續上一篇的IntersectionObserver基本使用（以下簡稱IO），本篇來寫三個實際應用。
本篇用到的資源如下：
UI framewrok：Bootstrap4
css animation：animate.css
無限捲動的資料：JSONPlaceholder
lazy load 延遲載入（圖片、影片）
IO最基本的應用就是延遲載入lazy load了，如果google一下大部份也都是拿lazy load來當示範。
lazy load的概念是這樣：
- img的src不填，改填
data-src="圖片路徑" - 當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
以下是留言，但關於留言的部份必需先讓你們知道：
本站的文章都是 Augustus 因為覺得有趣，才會實作並整理成筆記文而後進行發表。
如果留言是希望把 Demo 改成「你想要」的樣子，或是把功能改成「符合你需求」的樣子，
Sorry~ 除非那修改是 Augustus 也有興趣的，不然不會幫你們寫程式去面對工作或是交作業。
未來這類的留言不會再主動回覆。😎
另外，公開信箱是為了讓金流驗證用，
因為之前遇過幾次回信協助解決問題後，對方卻一聲謝謝也沒有，就這樣拿去幫工作交差。
因此決定不再回覆信件，有疑問就利用留言功能囉。