1.介绍
通过定时器制作进度条以及通过加载状态事件制作进度条，两者的区别在于通过定时器实现进度条，每次打开网页时进度条显示的时间一定，而通过加载状态事件制作进度条加载完全部内容后再显示内容，用户体验更好。
2.定时器制作进度条
2.1 html结构
<div id="progress">
<div class="loading">
<img src="../image/ic_loading.png" alt="loading">
</div>
</div>
<div>
<img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="pic">
</div>
2.2 css样式
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 20px auto;
text-align: center;
color: #222222;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#progress{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
z-index: 10;
background-color: #ffffff;
}
#progress .loading{
width: 53px;
height: 53px;
position: absolute;
left: 0;
top:0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
animation: loading 1.0s infinite linear;
-webkit-animation: loading 1.0s infinite linear;
}
@keyframes loading {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
</style>
2.3 javascript逻辑
window.onload = function () {
/**
* 通过定时器实现加载
*/
var timer = null
var progress = document.getElementById('progress');
timer = setInterval(function () {
progress.style.display = 'none'
},2000)
}
3.通过加载状态事件制作进度条
3.0 加载状态事件
document.onreadystatechange 页面加载状态改变时的事件
document.readystate 返回页面当前文档的状态
有四种状态：
uninitialized - 还未开始载入
loading - 载入中
interactive - 已载入，文档与用户开始交互
complete - 载入完成
根据这四个状态我们可以通过载入完成后隐藏进度条，而显示内容。
3.1 html结构
<div id="progress">
<div class="loading">
<img src="../image/ic_loading.png" alt="loading">
</div>
</div>
<div>
<img src="http://pic.qiantucdn.com/58pic/11/31/58/97p58PICV26.jpg" alt="pic">
</div>
3.2 css样式
<style>
*{
margin: 0;
padding: 0;
}
body{
margin: 20px auto;
text-align: center;
color: #222222;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#progress{
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
z-index: 10;
background-color: #ffffff;
}
#progress .loading{
width: 53px;
height: 53px;
position: absolute;
left: 0;
top:0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
animation: loading 1.0s infinite linear;
-webkit-animation: loading 1.0s infinite linear;
}
@keyframes loading {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes loading {
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
</style>
3.3 Javascript逻辑
document.onreadystatechange = function () {
var progress = document.getElementById('progress');
console.log(document.readyState)
if (document.readyState == 'complete'){
progress.style.display = 'none'
}
}
