本篇大綱
使用資源
接續上一篇的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


最近剛好也在看lazy loading
發現IntersectionObserver rootMargin’s positive and negative values are not working這篇有人回覆了
真的耶