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

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
IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動
Article Name
IntersectionObserver:下篇-實際應用 lazyload、進場效果、無限捲動
Description
本篇大綱:使用資源。lazy load 延遲載入(圖片、影片)、一個神奇的狀況(坑?)。進場效果。無限捲動。原始碼、Demo。接續上一篇的IntersectionObserver基本使用(以下簡稱IO),本篇來寫三個實際應用。本篇的無限滾動,是像FB那樣子,頁面每捲到底,就會多載入一張卡片進來。
Augustus
Let's Write
Let's Write
Publisher Logo

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *