vue 懒加载

懒加载概念

对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。

为什么需要懒加载？

像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

简单的说就是：进入首页不用一次加载过多资源，造成用时过长。

图片懒加载

使用vue-lazyload插件：

1. 下载

   $ npm install vue-lazyload -D

2. 注册插件

// main.js:
 
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
// 使用方法1:
Vue.use(VueLazyload)
 
// 使用方法2: 自定义参数选项配置
Vue.use(VueLazyload, {
  preLoad: 1.3, // 提前加载高度（数字 1 表示 1 屏的高度） 默认值:1.3
  error: 'dist/error.png', // 当加载图片失败的时候
  loading: 'dist/loading.gif', // 图片加载状态下显示的图片
  attempt: 3 //  加载错误后最大尝试次数 默认值:3
})

3. 在页面中使用

<!-- mobile.vue -->

<!-- 使用方法1: 可能图片url是直接从后台拿到的，把':src'替换成'v-lazy'就行 --> 
<template>
 <ul>
   <li v-for="img in list">
     <img v-lazy="img.src" >
   </li>
 </ul>
</template>

<!-- 使用方法2: 使用懒加载容器v-lazy-container,和v-lazy差不多,通过自定义指令去定义的，不过v-lazy-container扫描的是内部的子元素 --> 
<template>
 <div v-lazy-container="{ selector: 'img'}">
   <img data-src="/static/mobile/bohai/p2/bg.jpg">
   <img data-src="/static/mobile/bohai/p3/bg.jpg">
   ...
   <img data-src="/static/mobile/bohai/p13/bg.jpg">
 </div>
</template>

• 注意：
  v-lazy='src’中的src一定要使用data里面的变量，不能写真实的图片路径，这样会报错导致没有效果，因为vue的自定义指令必须对应data中的变量 只能是变量；v-lazy-container内部指定元素设置的data-src是图片的真实路径，不能是data变量，这个和v-lazy完全相反。

4. 给每一个状态添加样式

<style>
 img[lazy=loading] { }
 img[lazy=error] { }
 img[lazy=loaded] { }
</style>

参数选项说明

贴个征婚启事~~~

受朋友之托。
女，程序员，22岁，未婚，身高167cm，体重48KG，浙江杭州。
目前在阿里巴巴工作，负责支付宝相关业务，工号 527048398 支付宝搜索工号可见照片。
漂亮大方，爱好读书、健身、游泳、吃鸡。
杭州有房一套，有车。
父母退休，家庭不拜金、人务实，一直没有合适的男朋友。
她本人要求不高，只要对她真心好就行。