lazyload- 讓媒體資源(圖片、影片)延遲下載，增加網站開啟速度與優化使用者體驗

lazyload 是一個滿老牌的資源緩讀的函式庫，一般來說如果一個頁面有太多圖片的話，會因為同時間一起讀取而開啟速度很慢，lazyload 就是讓這些資源變成在頁面捲動到時才開始讀取，目前已經支援 RWD 的圖片以及影片，非常方便。

使用方法可以透過 cdn 讀入頁面：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

在圖片上使用的話就是把 src 改成 data-src

<img alt="A lazy image" class="lazy" data-src="lazy.jpg" />

加上 RWD 圖片：

<img
  alt="A lazy image"
  class="lazy"
  data-src="lazy.jpg"
  data-srcset="lazy_400.jpg 400w, 
    lazy_800.jpg 800w"
  data-sizes="100w"
/>

使用 picture 標籤

<picture>
  <source media="(min-width: 1200px)" data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x" />
  <source media="(min-width: 800px)" data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x" />
  <img alt="A lazy image" class="lazy" data-src="lazy.jpg" />
</picture>

背景緩讀

<div class="lazy" data-bg="lazy.jpg"></div>

影片的話則是改成這樣

<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4" />
  <source type="video/ogg" data-src="lazy.ogg" />
  <source type="video/avi" data-src="lazy.avi" />
</video>

更多詳細的設定可以前往官網觀看。