文章彙整

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

By Astral Web 3 months agoNo Comments
首頁  /  網站設計與開發  /  具有響應式功能的圖片延遲載入外掛

延遲載入 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 的基本功能,使用在響應式佈局、前端開發時,能快速增進使用者體驗,減少用户流量的損失。

 

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

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

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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。