初次访问首页时,由于加载资源耗时比较久,会出现空白页的情况,可以在资源加载结束前增加Loading效果从而提升用户体验

1 实现思路

具体实现思路是在入口的index.html添加你所需的加载提示,让它在页面刚开始加载时默认显示,隐藏主页的root标签

再在Vue入口的mounted里将加载提示的标签隐藏,再将主页的root标签显示

2 具体实现

  1. 首先准备Loading效果图,如:spinner.gif

  2. 入口index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>硕果云-sg-admin</title>
<style media="screen" type="text/css">
.preloader-init {
position: absolute;
top: calc(50% - 65px);
left: calc(50% - 65px)
}
</style>
</head>
<body>
<script src=/static/tinymce4.7.5/tinymce.min.js></script>
<img id="preloader-init" src="static/img/spinner.gif" class="preloader-init" alt="spinner"/>
<div id="app" style="display: none">
</div>
</body>
</html>
  1. Vue入口App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<div id="app">
<router-view/>
</div>
</template>

<script>
export default{
name: 'App',
mounted () {
document.getElementById('app').style.display = 'block'
document.getElementById('preloader-init').style.display = 'none'
}
}
</script>

3 源码示例

spring-microservice-exam-ui