延遲加載是指在資源需要時才加載，而不是預先加載。這樣做可以在頁面首次加載時不佔用資源，避免載入從未用到的文件。
在頁面首次加載時視區外的圖片特別適合這種技術。最棒的是 lazysizes 讓這種技術使用起來非常簡單。
什麼是 lazysizes？
lazysizes 是最流行的用於延遲加載圖片的庫。它會在用戶滾動頁面時智能地加載圖片，優先加載用戶很快要看到的圖片。
引入 lazysizes
引入 lazysizes 非常簡單：
在網頁中增加 lazysizes 的 script 標籤選擇你想延遲加載的圖片更新那些圖片的 img 標籤或 picture 標籤
添加 lazysizes 的 script 標籤
更新 img 或 picture 標籤
如果是 img 標籤，修改前：
修改後：
修改 img 標籤時，有兩處更改：
在 class 屬性中增加 lazyload 類名：它會告訴 lazysizes 該圖片應當延遲加載。修改 src 屬性為 data-src：當加載圖片時，lazysizes 代碼會從 data-src 屬性中讀取它的值然後設置圖片的 src 屬性。
如果是 picture 標籤，修改前：
修改後：
修改 picture 標籤時，有兩處更改：
在 img 標籤上增加 lazyload 類名修改 source 標籤的 srcset 屬性為 data-srcset。
驗證
打開瀏覽器的開發者工具，然後向下滾動網頁查看有什麼變化。在滾動時應該可以看到發起了新的網絡請求，然後 img 標籤的 class 值由 lazyload 變為 lazyloaded。
提示：現在瀏覽器已經內置了延遲加載功能！可以使用 loading 屬性來使用內置的延遲加載功能，對於沒有內置支持的瀏覽器再使用 lazysizes 作為備用方案。