图片懒加载， Vue-Lazyload实现懒加载

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;
}