Next.js Image 組件預設就有 lazy loading 功能,無需額外 Hook。

若需要自訂控制,可搭配 useLazyLoad 使用(需設定 unoptimized)
狀態: 載入中...

↓ 向下滾動查看原生 img 標籤範例 ↓
使用原生 img 標籤搭配 useLazyLoad Hook
狀態: 載入中...
↓ 繼續向下滾動 ↓
使用 rootMargin: 100px,圖片會在進入視窗 100px 前開始載入
狀態: 載入中...
此範例故意載入不存在的圖片,會自動顯示備用圖片
狀態: 載入中...