图片优化已经都是网页性能提升的重点之一，尤其是当网页非常的长的时候，如果图片很多，还没有显示出来的图片完全可以先隐藏起来不不去加载，等到元素漏出的时候再去请求图片资源，这样可以大大减少页面初次加载的白屏时间，提升用户体验。
CDN方式
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
安装
npm install vue-lazyload --save
在main.js中引入（全局引用）
import vuelazyload from 'vue-lazyload'
装载配置
Vue.use(vuelazyload,{
//路径/对应的就是项目的public文件夹
loading:'/load.gif',
error:'/user-bg.png'
})
接下来，将img标签的:src改成v-lazy即可，如<img v-lazy="img.src" >
v-lazy后面的图片路径
在使用vue-lazyload插件时，v-lazy='src'中的src一定要使用data里面的变量，不能写真实的图片路径，这样会报错导致没有效果，因为vue的自定义指令必须对应data中的变量或者是数字。
针对这个问题，vue-lazyload插件特意提供了v-lazy-container进行处理。
v-lazy-container总体上和v-lazy差不多，也是通过自定义指令去定义的，不过v-lazy-container扫描的是内部的子元素，v-lazy-container一般使用如下:
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
v-lazy-container和v-lazy不同的是，v-lazy-container是通过设置指定的子元素的data-src,data-loading,data-error去设置图片的路径的，其中error和loading可以省略，可以只写selector属性。同时还可以为指定的img元素指定error或者loading图片，写法如：<img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">或者<img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
样式优化
如果UI提供的加载显示的图片过大或者过小，这时候应该怎么办？
可以在公用CSS样式文件中添加代码，对加载时显示的图片进行调整，比如说把加载图片缩小为原来的0.3倍
img[lazy=loading] {
transform: scale(0.3);
}
因为图片没被加载的时候就相当于盒子是没有内容的，在加载过程中会有盒子被内容撑开的一闪而过画面，看上去不是很优雅，我们可以通过给对应的盒子添加最小宽度
min-height:650px;
