vue 图片懒加载

vue-lazyload

npm安装方法

npm install vue-lazyload

 

main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// or with options 也可以直接在这里设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比
  error: 'dist/error.png',//图片加载失败时使用的图片源
  loading: 'dist/loading.gif',//图片加载的路径
  attempt: 1//尝试加载次数
})

图片替换

 

加载中图片
​​​

使用方法:

<li v-for="img in list">
    <img v-lazy="img.src" >
  </li>