1.下载

 

npm i vue-lazyload -S

 

2.引入挂载

 

import Vue from 'vue'

 

import App from './App.vue'

 

import VueLazyload from 'vue-lazyload'

 

Vue.use(VueLazyload)

 

// 或者

 

Vue.use(VueLazyload, {

 

  preLoad: 1.3,

 

  error: 'dist/error.png',

 

  loading: 'dist/loading.gif',

 

  attempt: 1

 

})

 

new Vue({

 

  el: 'body',

 

  components: {

 

    App

 

  }

 

})

 

3.在vue中使用

 

<ul>

 

  <li v-for="img in list">

 

    <img v-lazy="img.src" >

 

  </li>

 

</ul>

 

4.在html中使用

 

<div v-lazy-container="{ selector: 'img' }">

 

  <img data-src="//domain.com/img1.jpg">

 

  <img data-src="//domain.com/img2.jpg">

 

  <img data-src="//domain.com/img3.jpg">  

 

</div>