温馨提示
此文章发布距今已过1925天，内容仅供参考~
预加载是一种性能优化技术，在网页全部加载之前，先对一些主要内容进行加载，给用户提供更好的浏览体验。使用了预加载之后，在网页全部加载出之前，先加载出一些主要内容，不会长时间呈现出一片空白，直到内容全部加载完毕。本文主要讲解如何在hexo中添加一个预加载动画。
本人使用的是hexo中Volantis主题，所以主要对Volantis作了些配置。当然其他主题也有通用的方法，后文会提及。首先说一下如何在Volantis主题中添加预加载动画。
Volantis中添加
添加配置信息
在主题配置文件volantis/_config.yml中添加配置
1
2
3
| preloader:
enable: true
layout: gear
|
添加配置文件
在blog\themes\volantis\layout\_widget中新建loaded.ejs文件（当然也可以在其它处创建，只要在layout文件夹下），文件中填写以下代码：
点击查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| <% if (theme.preloader.enable) { %>
<div id='loader'>
<% if(theme.preloader.layout == 'gear' ) {%>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<p style="text-align:center"> loading...</p>
</div>
</div>
<% } else if(theme.preloader.layout == 'spinner-box') { %>
<div class="loading-left-bg"></div>
<div class="loading-right-bg"></div>
<div class="spinner-box">
<div class="configure-border-1">
<div class="configure-core"></div>
</div>
<div class="configure-border-2">
<div class="configure-core"></div>
</div>
<div class="loading-word">加载中...</div>
</div>
<% } %>
</div>
<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
<% } %>
|
引入样式文件
其中spinner-box风格样式文件：
1
| <link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >
|
gear风格样式文件：
1
| <link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >
|
在blog\themes\volantis\layout\layout.ejs中，或者在blog\themes\volantis\layout\_partial\head.ejs引入都可。
引入到页面
在blog\themes\volantis\layout\layout.ejs的<body>标签下引入创建文件的地址：
1
| <%- partial('_widget/loaded') %>
|
使用gear风格加载动画时，页面中的导航栏可能会在动画前显示，较突兀。可在blog\themes\volantis\source\css\_layout的navbar.styl文件中修改导航栏的z-index属性。
文件地址：blog\themes\volantis\source\css\_layout\navbar.styl1
2
3
4
5
6
7
| .l_header
$iconW = 32px
$iconMargin = 4px
position: fixed
+ z-index: 100
top: 0
width: 100%
|
其他主题中添加
spinner-box风格样式
引入css文件
1
| <link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >
|
将下方代码添加到页面中的<body>下方
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="loader">
<div class="loading-left-bg"></div>
<div class="loading-right-bg"></div>
<div class="spinner-box">
<div class="configure-border-1">
<div class="configure-core"></div>
</div>
<div class="configure-border-2">
<div class="configure-core"></div>
</div>
<div class="loading-word">加载中...</div>
</div>
</div>
|
将js代码添加到页面中的</body>上方
1
2
3
4
5
6
7
| <script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
|
gear风格样式
引入css文件
1
| <link rel="stylesheet" href="https://gcore.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >
|
将下方代码添加到页面配置文件中的<body>下方
点击查看代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <div id='loader'>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
</div>
</div>
</div>
|
将js代码添加到页面中的</body>上方
1
2
3
4
5
6
7
| <script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
|
最后
目前只添加了两种样式的加载动画，后期如有其它好看的再添加。注意在Volantis的3.0版本中，由于添加了pjax，所以在页面跳转时不会加载动画。如果需屏蔽某个页面启用pjax跳转，请查看主题配置文件中pjax部分说明。
参考：
条评论