vue图片懒加载使用教程 lazyload

自己的随手笔记，分享给大家，如果有不足或者建议请大家多多指教，如果有问题请加 QQ(1445579000) 说明来意

懒加载文档地址：

https://www.cnblogs.com/xyyt/p/7650539.html

所谓的懒加载使用起来非常的简单，当拖动到哪里就加载那一段距离的数据，没有拉到的数据，显示默认的加载图片，而且可以设置多种加载时候的参数（设置每次加载图片的数量，高度.......）,下面就来具体的说一下懒加载的使用吧！只需三步哦！！！

1. 安装插件：

npm install vue-lazyload --save-dev

2. main.js引入插件：

import VueLazyLoad from 'vue-lazyload' Vue.use(VueLazyLoad,{ error:'./static/error.png', loading:'./static/loading.png'

图片懒加载时候的参数

...... })

 

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

<img class="item-pic" v-lazy="newItem.picUrl"/>