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

分享:
標籤: javascript

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>

 

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

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。