vue-lazyload懒加载插件介绍和应用

如下可以看到当我们刷新页面时，图片的请求特别多

但实际上我们首屏幕上只有几张图片，那能不能做到我们只去请求首屏的图片，而其他图片当我们滚动到它的时候再去请求和加载。就是我们常说的图片懒加载技术。在此利用vue的第三方插件vue-lozyload。

Github链接：https://github.com/hilongjw/vue-lazyload

npm下载安装成功后，在main.js内注册

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: require('common/image/default.png')
})

使用也是极其简单，把:src换成v-lazy即可。

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

这样图片懒加载的效果就实现了，效果如下：