效能詞條 4-19

惰性載入Lazy Loading

也常叫做：延遲載入、Lazy Loading、懶載入

你可能會這樣說

網站圖一多，第一次開啟就空白好幾秒，手機上更慘；聽說有個技巧叫「惰性載入」，圖片接近視野時才開始下載，第一屏可以快很多。想了解並套用到自己的網站。

惰性載入是資源等到需要時才下載：圖片不在畫面裡就先不抓，等捲動接近了才開始載。

它省的是第一屏的時間：使用者先看到版面與文字，下面的圖邊捲邊載，體感速度立刻快一截。

兩個配套不能少：首屏的圖照常載入不要偷懶，而且每張圖都要標示寬高預留位置，否則圖一載完版面就跳一次。

看仔細：骨架形狀跟真的內容一樣——資料來的時候畫面不會跳。

圖 4-19　看骨架屏閃一下，再換成真的內容。

中文就可以

幫網站圖片加上惰性載入：
1. 首屏以下的圖片延遲載入，首屏照常載。
2. 每張圖片都要標明寬高，避免載入後版面跳動。
3. 順便把圖片轉成 WebP 並壓到合理大小。
4. 載入前顯示淺灰底或模糊預覽，不要留白。