Image Lazy Loading implement

Lazy Loading 三種實現方式

參考資料:

@mingjunlu/lazy-loading-images-via-the-intersection-observer-api-72da50a884b7"">https://medium.com/@mingjunlu/lazy-loading-images-via-the-intersection-observer-api-72da50a884b7

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Native Lazy Loading

在 HTML 標籤上加上 loading="lazy" 即可

<img src="image.jpg" alt="..." loading="lazy">

優點: 方便快速, 效能好

缺點: 目前許多瀏覽器尚未支援, Chrome 也得自行啟用功能 Enable lazy image loading (#enable-lazy-image-loading) 才會有效果

Intersection Observer API

使用 Intersection Observer API 來實作, Intersection Observer API
能方便地自動觀察目標元素是否進入或離開父層（或其外層）元素或瀏覽器的 viewport

優點: 程式碼直覺, 效能好, 瀏覽器大多支援

缺點: IE 瀏覽器未支援, 得加上 polyfill https://github.com/w3c/IntersectionObserver/tree/main/polyfill

Listen scroll event

scroll 事件監聽搭配運用 Element.getBoundingClientRect()

監聽圖片是否已出現在畫面中

優點: 瀏覽器幾乎完全支援

缺點: 效能差, 需搭配 passive event listeners 與 throttle 來減少效能損耗