vue——图片懒加载

原理：

先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到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文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

<img v-lazy="item">
备注：若全局安装了Mint UI，在main.js中引入了Mint UI可以省略步骤1和2。

 详细解读参考链接：https://mp.weixin.qq.com/s/Syqoz_Hkh7JY4GYIu_TE3A

参数选项说明