vue-lazyload图片懒加载的使用

意义：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。这也就是们通常所说的首屏加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。

所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

vue-lazyload的使用：首先要注册vue-lazyload，然后才可以使用，在要使用懒加载技术的项目中安装vue-lazyload,npm install vue-lazyload --save,或cnpm install vue-lazyload --save

安装完毕之后在项目的主入口文件main.js里面引入

使用懒加载的组件

配置好路由

实现效果

首屏图片在打开页面时已经加载好，但是剩余的图片并未加载，当插件检测到用户的向下滑动的行为时，再按需加载即将被用户看到的图片，在此之前，会显示之前已经设定好的loading(加载中)的图片。

另外：

注册插件的时候，是可以传入第二个配置参数的

Vue.use(vueLazyload,{})

可选的参数如下：

preLoad:类型Number,默认1.3. 表示lazyload的元素距离页面底部距离的百分比.计算值为(preload - 1).

attempt:图片加载失败后的重试次数.默认为3.

error:类型string.图片加载失败后的显示的失败图片路径.

loading:类型string.图片正在加载中显示的loading图片的路径.

listenEvents:类型array.默认['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'].即是在监听上述事件中,判断图片是否在preload的位置.如果你不想在那么多事件中判断,可以指定一个或者几个.例如如果你给这个属性只指定['touchmove'].那么scroll 屏幕不会加载图片,只有手指滑动屏幕才会加载图片.

adapter:注册img 的loading,loaded,error三个状态的回调函数,参数会暴露懒加载的img元素,可以对其进行操作.

filter: img未加载之前,解析到src 的时候注册的回调函数.可以在加载图片之前,对src进行修改.注册在filter下的所有的函数都会执行

更多参数的解释：https://segmentfault.com/a/1190000011672452