vue-lazyload简单配置

 vue-lazyload是比较常用的vue图片懒加载插件。配置和使用比较简单。当需要加载大量图片的时候可以使用该插件。

简易版配置步骤：

1. cnpm或者npm安装

cnpm i  vue-lazyload -S   #安装至develop中

npm install vue-lazyload --save-dev

2. main.js中引入并配置参数

比较常用的参数是图片加载错误（error）和预加载时显示的图片（loading）

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/error.png',    //图片路径错误时加载图片
    loading:'./static/loading.png'   //预加载图片

}) 

3. 在vue文件中使用

将vue中的img图片绑定图片绑定 v-bind:src 修改为 v-lazy

<img class="demo_img" v-lazy="data.imgUrl"/>

附：

git地址：https://github.com/hilongjw/vue-lazyload