vue lazyload最基础的使用

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

  图片懒加载基本原理就是，初始时统一将img的src设置为一张默认图片，当图片暴露在你的视线或者达到了你设定的条件，才将真正的图片链接填入img的src属性，从而达到节省性能的目的。

 首先我们只是需要最基础的懒加载功能，所以仅仅简单使用的话是很简单的，如果项目有需要再去查阅文档，直接上代码:

1. 安装插件：
 

npm install vue-lazyload --save-dev

 

 

 

2. main.js引入插件：

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:require('./statics/site/imgs/erro.jpg'),
    loading:require('./statics/site/imgs/load.gif')
})

3. vue文件中将需要懒加载的图片 :src="" 修改为 v-lazy="" 

 

 

如：

 

 

<img v-lazy="imgUrl"/>