自幹 React Img LazyLoad 元件
為什麼要使用圖片 LazyLoad？
1. 減少頻寬浪費
圖片與影片是網站中最吃資源的元素之一，尤其在行動網路環境下，過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入，只在使用者滑動到該區域時才載入圖片。
2. 提升首次載入速度
圖片載入不只是下載，還會耗用瀏覽器 CPU 解析與渲染時間。
LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片，提升 First Paint 時間，讓內容更快顯示。
3. 強化使用者體驗
使用者更快看到畫面上可見的內容，自然會覺得「這網頁好快」。反之，如果等圖卡住了頁面，體驗就會大打折扣。
各大網站 LazyLoad 的應用範例
PChome
先顯示灰底圖片，等圖片載入後才替換。
ETtoday
有 loading 動畫的底圖，載入圖片後再替換。
Medium 的高級做法：漸進式圖片置換
Medium 的做法分成三階段：
1.