页面预加载loading动画，再载入内容
程序员文章站
2022-03-18 20:18:04
...
原文地址：http://blog.csdn.net/xiaokui_wingfly/article/details/51502209
默认情况下如果网站请求速度慢，所以会有一段时间的空白页面等等，用户体验效果不好，见到很多的页面都有预加载的效果，加载之前先加载一个动画，后台进程继续加载页面内容，当页面内容加载完之后再退出动画显示内容，这样的用户体验更好。
例如此链接：http://crusader12.com/C12HoverAlls/
这篇文章是从上面链接的内容上拔下来的，操作流程很简单，只有两部如下
首先定义一个loader.css文件，如下内容
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:999999;}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 1 */
border-top-color: #FFF;
-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
z-index:1001;}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
/* COLOR 2 */
border-top-color: #FFF;
-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
#loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
/* COLOR 3 */
-moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
@-webkit-keyframes spin {
0%{
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}100%{
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}
}
@keyframes spin {
0%{
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}100%{
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */}
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background: #1abc9c; /* Old browsers */
z-index: 1000;
-webkit-transform: translateX(0); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(0); /* IE 9 */
transform: translateX(0); /* Firefox 16+, IE 10+, Opera */}
#loader-wrapper .loader-section.section-left {left: 0;}
#loader-wrapper .loader-section.section-right {right: 0;}
/* Loaded */
.loaded #loader-wrapper .loader-section.section-left {
-webkit-transform: translateX(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(-100%); /* IE 9 */
transform: translateX(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader-wrapper .loader-section.section-right {
-webkit-transform: translateX(100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateX(100%); /* IE 9 */
transform: translateX(100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
.loaded #loader {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: translateY(-100%); /* IE 9 */
transform: translateY(-100%); /* Firefox 16+, IE 10+, Opera */
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;}
/* JavaScript Turned Off */
.no-js #loader-wrapper {display: none;}
.no-js h1 {color: #222222;}
#loader-wrapper .load_title {
font-family:'Open Sans';
color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
#loader-wrapper .load_title span { font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}
- 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
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
第二步：在网站页面header标签和body标签加入以下代码
// 引入jquery
<!--页面加载start-->
<link rel="stylesheet" type="text/css" href="css/loader.min.css">
<script type="text/javascript">
// 等待所有加载
$(window).load(function(){
$('body').addClass('loaded');
$('#loader-wrapper .load_title').remove();
});
</script>
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载LoveFeel站点<br><span>V1.0</span></div>
</div>
<!--页面加载end-->
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
HoverAlls页面源码如下操作，他先是加载一段json封装之后再显示内容的，我上面的代码省去了json的操作。
$(window).load(function(){
$('body').addClass('loaded').Chameleon({
'current_item':'hoveralls',
'json_url':'../Envato/items.json'
});
$('#loader-wrapper .load_title').remove();
}); - 1
- 2
- 3
- 4
- 5
- 6
- 7
当然也可以访问我的页面看看效果
http://lovefeel.top/marry/
查看原文：http://www.ibloger.net/article/401.html
相关阅读：
30种CSS3炫酷页面预加载loading动画特效（推荐）：http://www.ibloger.net/article/1558.html
Loaders.css 多种纯CSS加载进度动画效果：http://www.ibloger.net/article/1568.html
load-awesome 53种纯CSS3预加载页面loading指示器动画特：效http://www.ibloger.net/article/1800.html
CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效：http://www.ibloger.net/article/1556.html
按钮特效 基于SVG和Segment.js的Loading加载：http://www.ibloger.net/article/1554.html