项目笔记——图片懒加载

图片懒加载

1.使用Vue-Lazyload库

npm install vue-lazyload --save

2.全局注册引用

在main.js文件中

//1
import VueLazyload from 'vue-lazyload'
//2
Vue.use(VueLazyload)
//3 error，loading等的配置可以不用写 
Vue.use(VueLazyload, {
  loading: require('./assets/img/common/placeholder.png'),
})

3.使用v-lazy 即将 :src替换为v-lazy

<img v-lazy="showImage" :key="showImage">

4.注意

1.绑定:key可以确保数据加载的准确

2.占位图、错误显示等具体可以在github中搜索Vue-Lazyload查看使用