vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。

请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板看到这个速度弄死我的想法都有了。

这是后我们可以使用图片懒加载的方式，和以前Jquery图片懒加载的效果是一样的，当你需要展示这张图片的时候，才去请求它，加载出来，这样效率会高很多。

这里vue用的懒加载是：vue-lazyload

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

命令：

cnpm install vue-lazyload

引入：

import VueLazyload from 'vue-lazyload'

在main.js中全局使用:

Vue.use(VueLazyload, {
preLoad: 1,    //预加载高度的比例
error: 'http://cdn.uehtml.com/201402/1392662591495_1140x0.gif',  //图像的src加载失败
loading: 'http://cdn.uehtml.com/201402/1392662591495_1140x0.gif', //src的图像加载
attempt: 1,  //尝试计数
listenEvents: [ 'scroll', 'mousewheel' ] //你想要监听的事件,我个人喜欢全部监听，方便
});

页面当中的写法：

<img src="" v-lazy="Img1"  />    //src空着即可，不用写

在data（）中将图片地址引入：

Img1:'../../static/images/20170903234241.jpg'  

最后需要注意图片存放路径，static文件夹下面才是最安全的。

这是最终的效果，加载了8M，和之前相比相差2M，但是时间缩小很多。

参考博客：http://blog.csdn.net/bboyjoe/article/details/72677677