基於Vue的圖片懶加載插件vue-lazyload應用

引言：

做爲一名web前端工程師，不只須要有過硬的開發能力，更須要有強大的用戶體驗意識。

可視化頁面是與用戶交互的直接媒介！前端工程師的價值，本人認爲主要體如今交互！

概念：

1.什麼是圖片懶加載？

顧名思義，圖片懶加載針對的對象是圖片。圖片是一種多媒體資源，在加載過程當中會消耗較多的網絡資源。

一般對於圖片的優化主要是下降圖片質量以保證文件足夠小，要麼利用base64格式進行壓縮。但是這麼作治標卻不治本！

懶加載的核心是「懶」！也就是說，須要你的時候你給我出現，沒到你表現的時候給我休眠！

2.爲何須要圖片懶加載？　　　　

web資源的加載速度，不光可以影響用戶體驗感，還可以優化SEO，而且在必定程度上可以知足開發者的成就感。

現在的電商網站能夠說是千千萬萬，各個大型電商網站的商品頁列表數據，在必定程度上達到了海量數據的級別。

若是咱們在一個頁面加載過程當中去請求列表數據，獲得的圖片數量也是比較龐大的，這對瀏覽器渲染帶來了不小的壓力。

那麼，圖片懶加載，就成爲了緩解這種壓力最適合的解決方案！而且在vue項目中，存在很方便的插件vue-lazyload可使用。

應用：

1.安裝vue-lazyload：

很是方便，只須要在vue項目中安裝vue-lazyload：　

npm i vue-lazyload -S

2.引入vue-lazyload：

找到項目中的main.js，引入如下代碼：

import lazyLoad from 'vue-lazyload' /* 引入vue-lazyload用 */
Vue.use(lazyLoad);　　/* 註冊lazyLoad */

3.簡單使用vue-lazyload：

咱們使用v-lazy屬性進行圖片引入，循環36個：

<img v-lazy="require('../assets/3016328129_14.jpg')" v-for="(item,index) in 36" :key="index" />

4.實現效果：

以下圖，右邊滑動條只有這麼一點，咱們往下滑動，會加長，這就是懶加載！

   

 

 

補充：

1.配置擴展：

咱們能夠配置加載中的圖片和加載失敗顯示的圖片。

Vue.use(lazyLoad, {
    error: require('./assets/error.png'), //圖片路徑錯誤時加載圖片
    loading:  require('./assets/loading.png') //預加載圖片
});

還能夠配置其它項，如下是參考文檔：https://www.w3cschool.cn/vantlesson/vantlesson-tsou35w1.html

2.樣式擴展：

/* 加載時 */
img[lazy="loading"] { 
  width: 373px;
  height: 266px;
  background: #ddd;
}

/* 加載失敗 */
img[lazy="error"] {
  width: 373px;
  height: 266px;
  background: red;
}

/* 加載後，沒理解，但剛進入頁面時有一瞬間是這個效果 */
img[lazy="loaded"] {
  width: 373px;
  height: 266px;
  background: green;
}

 原創地址：http://www.javashuo.com/article/p-ypieurmj-me.html