useLazyLoad Hook 測試
一、Next.js Image 內建功能
Next.js Image 內建 lazy loading (對照組)
Next.js Image 組件預設就有 lazy loading 功能，無需額外 Hook。
Next.js Image 搭配 useLazyLoad
若需要自訂控制，可搭配 useLazyLoad 使用（需設定 unoptimized）
狀態: 載入中...
↓ 向下滾動查看原生 img 標籤範例 ↓
二、原生 img 標籤搭配 useLazyLoad
1. 基本懶載入
使用原生 img 標籤搭配 useLazyLoad Hook
狀態: 載入中...
↓ 繼續向下滾動 ↓
2. 配合 rootMargin 提前載入
使用 rootMargin: 100px，圖片會在進入視窗 100px 前開始載入
狀態: 載入中...
3. 錯誤處理 (載入失敗時顯示備用圖片)
此範例故意載入不存在的圖片，會自動顯示備用圖片
狀態: 載入中...