具有響應式功能的圖片延遲載入外掛

延遲載入 lazy load 是 Hibernate3 默認的加載方式，延遲載入機制是為了避免一些無謂的性能開銷而提出，延遲載入就是當在真正需要數據的時候，才真正執行數據載入操作。

瀏覽器下載過程中，由於圖片過多導致下載速度過慢，那麼我們只需要在「看得到」的地方載入圖片，而視角外的地方會隨著 scrollbar 的滾動才跟著載入，這樣有效避免因圖片過多而載入過慢的問題。

緩慢的網站載入速度將會最直接影響到使用者體驗，網路上有很多 lazy load 外掛提供前端人員使用，而我們這次選擇 lazysizes.js 作為介紹。lazysizes.js 使用簡單，不需要引用第三方 JS 程式庫，直接帶入即可，功能廣泛，如同標題所說適用響應式圖像，可以自動匹配圖片大小，也有預先加載低質量圖像的功能，這些都能有效提高使用者體驗。

下載網址： https://github.com/aFarkas/lazysizes

範例：http://afarkas.github.io/lazysizes/#examples

使用方法

Step 1: 下載 lazysizes.min.js 外掛並引入至網頁

Step 2: 將 class = “lazyload” 新增到要延遲載入的 <img> 或 <iframe>

Step 3: 增加 data-src 屬性代入要加載的圖片路徑（ lazy load 的基本原理就是，在需要時才把 data-src 的值賦予給 src 進行載入）

以上為基本的使用規則，以下提供範例所介紹的三種進階使用方式

模糊轉清晰的下載模式：

<img
alt=""
src="low-quality.jpg"
data-src="normal-quality.jpg"
class="lazyload" />

響應式下載模式：（會根據視窗大小選擇合適的圖片）

<img
alt=""
src="small.jpg"
sizes="(min-width: 1000px) 930px, 90vw"
data-srcset="small.jpg 500w,
medium.jpg 640w,
big.jpg 1024w"
class="lazyload" />

Iframe延遲載入模式：

<iframe

data-src="//www.youtube.com/embed/ZfV-aYdU4uE" 

class="lazyload"

frameborder="0"

allowfullscreen>

</iframe>

若需要了解更多詳細資訊，請參閱文件，內部有更多功能介紹！以上為大家初步說明 lazysizes.js 的基本功能，使用在響應式佈局、前端開發時，能快速增進使用者體驗，減少用户流量的損失。

我們在先前的文章，也介紹過其他提供分析網站速度的檢測工具：

以上是今天為大家介紹的具有響應式功能圖片延遲載入外掛，如果有您有更多疑問可以詢問我們，未來會撰寫更多電商網站相關文章，您想知道什麼嗎？歡迎在下方留言給我們。

或追蹤我們的粉絲專頁，就不錯過最新文章喔！

前端開發, 技術應用

具有響應式功能的圖片延遲載入外掛