在vue中使用图片懒加载插件

什么是图片懒加载？

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。

作用

这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等，可以有效的减少首屏加载时间

适用于

在某一个页面向服务器发起请求大量的图片请求，而首屏只需要显示几张图片

下面介绍一个适用于vue的图片懒加载插件，vue-lazyload(文档)

• 安装

 npm install vue-lazyload --save

• 在main.js中引入和使用

import VueLazyLoad from 'vue-lazyload'  //引入
Vue.use(VueLazyLoad, {
  loading: require('@/assets/images/loading.gif')
})
//第二个参数为这个插件的配置项，可以参考上面的文档设置配置项

• 在组件中使用,把img标签中原来的v-bind:url=""换成v-lazy=""就可以了

<img v-lazy="item.imgurl"></img>