vue-cli項目中引入圖片懶加載

1、全局安裝vue-lazyload

npm install vue-lazyload -g

 

2、在main.js配置文件引入

import VueLazyload from 'vue-lazyload'

 Vue.use(VueLazyload, {
   //預加載高度
   preLoad: 1.3,
   //錯誤時顯示的圖片
   error: 'static/about111.jpg',
   //圖片加載中顯示的圖片
   loading: 'static/img/loading.gif',
   //嘗試加載次數
   attempt: 1
 })

　

3、在組件中使用時，將img標簽的src換成v-lazy：

　　未使用懶加載前的代碼：

<li><img class="g-img1"src="static/1.jpg" alt=""></li>

　　使用懶加載后的代碼：

<li><img class="g-img1" v-lazy="'static/1.jpg'" alt=""></li>

 

4、在不同的頁面中顯示不同的加載占位圖的寫法

<img v-lazy="{src: item.imgUrl, loading: 'http://www.xxx.com/loading.png'}" alt="" />

　　

5、背景圖使用懶加載的寫法

v-lazy:background-image="{src: item.imgUrl, error: 'http://www.xxx.com/error.png', loading: 'http://www.xxx.com/loading.png'}"