Vue实现图片懒加载vue-lazyload

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>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64232.shtml

张贴在3