【Vue】vue-lazyload图片懒加载的使用

安装

npm i vue-lazyload -S

配置

在main.js文件中进行基本配置

import VueLazyload from 'vue-lazyload'

// 注册懒加载事件
Vue.use(VueLazyload, {
  // 设置加载的占位图片
  loading: require('./assets/images/loading.png')
})

使用

将img标签传统的src属性换成v-lazy

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