vue 优化

1. 图片优化

vue-lazyload  图片懒加载

安装：

npm install vue-lazyload -D

使用：

import VueLazyload from 'vue-lazyload' //使用懒加载组件
Vue.use(VueLazyload,{  
  error: require('./assets/img/404nofind.jpg'),//当加载图片失败的时候
  loading: require('./assets/img/loading.png'),//当加载图片成功的时候
  preLoad:1

 })

配置参数：

preLoad（Number）:预载高度比例,默认值为 1.3

error（String）：当加载图片失败的时候，值为图片路径 data-src    

loading（String）：当加载图片成功的时候，值为图片路径 data-src

attempt （Number）： 尝试次数 默认值为3次                                                

listenEvents：想要监听的事件，'scroll','wheel','mousewheel','resize','animationend',

'transitionend','touchmove'

adapter: 动态修改元素属性，默认值为{ }

filter: 图片监听或过滤器，默认值为{ }

lazyComponent:懒加载组件，默认值为false

dispatchEvent：触发dom事件，默认值为false

throttleWait：节流阀，默认值为200

组件中使用：

<img v-lazy="img.src">

注：图片动态刷新：添加key

<img v-lazy="img.src" :key="img.src">

vue文件中需要懒加载的背景图片，v-lazy:background-image="imgUrl"

 <div v-lazy:background-image="imgLink"></div>