vue-cli project introduced lazy loading images

1, the global installation vue-lazyload

npm install vue-lazyload -g

 

2, in main.js introduction profile

VueLazyload from Import 'VUE-lazyload' 

 Vue.use (VueLazyload, { 
   // preload height 
   preLoad: 1.3, 
   image to display when error // 
   error: '/static/about111.jpg', 
   the display picture images // Loading 
   loading: '/static/img/loading.gif', 
   // try loads 
   attempt:. 1 
 })

　

3, when used in the assembly, the src img tag into v-lazy:

　　Code before lazily Not used:

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

　　Use code lazy loading:

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

 

4, show different wording in the different loading placeholder FIG pages

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

　　

5, background using lazy loading wording

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