1.图片懒加载

1.1.什么是图片懒加载

图片懒加载 图片的懒加载就是在页面打开的时候，不要一次性全部显示页面所有的图片，而是只显示当前视口内的图片，一般在移动端使用（PC端主要是前端分页或者后端分页）。

优点：页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好；

1.2.为什么要使用懒加载？

很多页面，内容很丰富且很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，可能会等待较长的时间，没有丝滑的使用体验。

1.3.懒加载的原理是什么？

懒加载的原理就是先在页面中把所有的img标签中的src使用一张占位图进行占位，等到浏览到响应的位置再把相应的src值传入进去。

页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在再把图片链接存放到src属性中。

2.Vue-Lazyload插件的使用

2.1.安装

npm install vue-lazyload --save

2.2.在main.js中全局注册

import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// 配置项Vue.use(VueLazyload, {preLoad: 1.3,error: 'error.png',loading: 'loading.gif',//懒加载时占位图片（加载中...）attempt: 1})

2.3.在页面中使用

把原本的src替换成v-lazy

<li><img v-lazy="img.png"></li>或是<li v-for="(img,index) in imgList"><img :v-lazy="img.url"></li>

需要的话对占位图片可以设置样式

img[lazy="loading"]{display:block;width:50px !important;height:50px !important;}