学习资料
慕课网--常用的网页加载进度条
在线进度条生成GIF
在线进度条动画
CSS3前缀兼容
概述
最近在慕课网上学习网页加载进度条课程, 将课程所学知识整理在本文中，便于以后查看；
课程主要内容
- 通过加载状态事件制作进度条;
- 定位在头部的进度条;
- 实时获取加载数据的进度条;
网页加载进度条误区
网上很多关于实现加载进度条的资料，都采用定时器的方式实现，但是这种方式并不是真正的进度条，只是将网页的内容延迟呈现给用户而已；
加载进度条的实现
定时器+GIF图片实现
使用JavaScript的setTimeout或者setInterval，来延迟一段时间加载网页内容；
进度条布局
<div class="loading">
<div class="lodaing-ele"></div>
</div>
编写样式
要点：
- 进度条的最外层容器，即是
.loading的``
div元素要设置固定定位； - 进度条容器的宽高可以根据实际需求调整，一般是设置为跟随父元素的尺寸变化而变化，即是:
width: 100%;height: 100%; - 将进度条在页面中的层级设置为最高，即是设置
z-index的值为最大； - 内层元素设置为绝对定位，一般是居中显示，但可以根据实际需求调整；
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff;
}
.loading .loading-ele {
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
width: 64px;
height: 64px;
background: url("../img/126.gif") 0 0;
}
编写脚本
1秒后隐藏加载进度条；
setInterval(function() {
$('.loading').hide();
},1000);
结果展示
定时器实现加载进度条.GIF
缺点
只能根据一个固定的时间来加载内容，不切合实际;
通过监听加载状态事件+CSS3进度条小动画实现
通过监听文档状态改变事件的阶段来实现是否显示加载进度条；
知识点
-
页面加载状态改变时的事件
document.onreadystatechange
-
返回当前文档的状态
document.readyState
document.readyState的状态
- uninitialized -- 还未开始载入；
- loading -- 载入中；
- interactive -- 已载入，文档与用户可以开始交互；
- complete -- 载入完成；
document.onreadystatechange，返回状态是complete是表示所有的内容都加载成功了，此时隐藏加载进度条，显示页面内容；
加载进度条布局
<div class="loading" id="loading">
<div class="loading-ele">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
编写样式
要点：
- 进度条的最外层容器，即是
.loading的``
div元素要设置固定定位； - 进度条容器的宽高可以根据实际需求调整，一般是设置为跟随父元素的尺寸变化而变化，即是:
width: 100%;height: 100%; - 将进度条容器在页面中的层级设置为最高，即是设置
z-index的值为最大； - 内层元素（
.loading-ele）设置为绝对定位，一般是居中显示，但可以根据实际需求调整； - 内层元素的子元素进行缩放操作，每个元素元素的缩放延迟时间依次递增；
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 0, 0);
z-index: 1000;
}
.loading-ele {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
width: 50px;
height: 50px;
}
.loading-ele span {
display: block;
float: left;
margin: 0 2px;
width: 6px;
height: 50px;
background: #00a0e6;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: loading 1.2s infinite;
animation: loading 1.2s infinite;
}
.loading-ele span:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.loading-ele span:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.loading-ele span:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.loading-ele span:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes loading {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes loading {
0%,
40%,
100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
结果展示
监听加载事件结合CSS3进度条动画.GIF
定位在头部的进度条
将进度条放在页面顶部显示；
每加载完成页面中的一块区域，则进度条增大一部分的百分比，这样加载的原理是根据浏览器渲染页面内容是按照从上到下的方式加载；
案例布局
<div class="loading">
<div class="loading-ele"></div>
</div>
<header>
<img src="http://img0.imgtn.bdimg.com/it/u=3213383801,616553731&fm=27&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=2084835106,1689055670&fm=27&gp=0.jpg" alt="">
</header>
<script>
$('.loading .loading-ele').animate({
width: '10%'
}, 100);
</script>
<section class="banner">
<img src="http://img3.imgtn.bdimg.com/it/u=968106239,1064893792&fm=27&gp=0.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=2150060954,4184285242&fm=200&gp=0.jpg" alt="">
</section>
<script>
$('.loading .loading-ele').animate({
width: '30%'
}, 100);
</script>
<section class="about">
<img src="http://img3.imgtn.bdimg.com/it/u=2703079217,2981293394&fm=27&gp=0.jpg" alt="">
<img src="http://img0.imgtn.bdimg.com/it/u=2564134372,329020640&fm=27&gp=0.jpg" alt="">
</section>
<script>
$('.loading .loading-ele').animate({
width: '50%'
}, 100);
</script>
<section class="prop">
<img src="http://img1.imgtn.bdimg.com/it/u=386988813,1559784928&fm=200&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=3827763211,2878435086&fm=27&gp=0.jpg" alt="">
</section>
<script>
$('.loading .loading-ele').animate({
width: '70%'
}, 100);
</script>
<section class="news">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2127463563,1209028471&fm=200&gp=0.jpg" alt="图片加载失败...">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2795898335,2158698298&fm=200&gp=0.jpg" alt="图片加载失败...">
</section>
<script>
$('.loading .loading-ele').animate({
width: '90%'
}, 100);
</script>
<footer>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2127463563,1209028471&fm=200&gp=0.jpg" alt="图片加载失败...">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2795898335,2158698298&fm=200&gp=0.jpg" alt="图片加载失败...">
</footer>
<script>
$('.loading .loading-ele').animate({
width: '100%'
}, 100, function() {
$('.loading').fadeOut();
});
</script>
编写样式
* {
padding: 0;
margin: 0;
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: #fff;
}
.loading .loading-ele {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 10px;
background: firebrick;
}
结果展示
在头部加载进度条.GIF
网友评论