常用的网页加载进度条之【制作进度条】
2017-09-20 21:21
344 查看
一、课程介绍
随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢得多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更快人性化的方式给用户展现。下来我们通过几个页面来看一下网上有哪些常见的进度条。
（1）阿里的字体库阿里字体库
会发现有个等待的小动画，那三个变换的小圈圈，这个页面比较简单，内容一下子就加载出来了
（2）再来看一下hao123hao123
这里的内容比较多一点，会发现网页加载的时候，页面上方会有一条绿色的线条从左到右的一个进度。
（3）还有一些国外的网站，我们再来看一下。国内的网站加载速度一般都比较快。TOTAL:SpaceTravellers
这个加载的期间，其实就是一个CSS的一个小动画，这个显得有点枯燥了
（4）还有一些网站，点击进去它的加载方式是计时，就是从0一直到100%的时候，咱们看到具体的数据，我们也能够清楚还有多长时间可以进入我们的主体页面。Proud & Punch |
网上这些效果是特别的多的，所以我给大家介绍了几个内容。
现在我们开始学习。
预备知识
代码编辑器
HTML5+CSS3-网页排版
JavaScript-通过函数写特效
二、制作进度条
（一）网页加载进度条误区
有人认为进度条是不是可以给它一个定时器，比如说让它延迟3秒钟或者延迟5秒钟之后再来加载我们的相关内容，这种方法并不是说不行，那么我们这个网页延迟3秒钟之后呢，大多数的图像或者主体已经加载过来了，也是可以的。这种用定时器的方法可以解决一部分的问题，但是弊端也是非常大的。比如说页面已经打开过了，已经缓存在本地了，那么我们再用定时器的时候，它这个效率肯定是比较低的。因为无论有没有这个缓存，它都要执行这个3秒钟的延迟，所以说这个效率和体验都不太良好。
之所以很多同学会用这个定时器，因为在网上搜索的时候，有很多这个进度条都是根据定时器来做的。比如在百度上面搜索一下信息进度条，随便打开一个，预览一下，这个就是一个定时器，根据一个时间到结尾的时候把当前页面清掉，展示我们相应的内容，这些东西都是关于一些定时器的。这种方法只能说从表现上已经实现了进度条，但是实质不是一个真正的进度条。
那么我们看一下真的进度条应该怎么去做。
我们一会会详细讲解根据主体内容来加载进度条，现在我们主要做一个简单的加载小动画的东西，加载完成之后，再展示我们的相应的页面，我们最起码应该先把布局和结构先弄清楚。默认的是页面上方有透明的或者不透明的背景，把主体内容遮挡住，中间有个小动画，当我们的页面加载完成完成之后，再让它把后面的内容展示出来。这里我们先用这种误区做一个定时器的方法，暂时演示一下我们的布局结构。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器的进度条</title>
<style>
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
/*如果页面上只有白色，那么我们看起来非常枯燥，也不知道是什么东西。所以说需要加载一个小动画，一种是加载一张图像，另一种方法是利用CSS3加一个有意思的动画。推荐如果找一些比较有趣味的图像：【https://preloaders.net/】在线生成的GIF图标，我们使用网上常见的类型*/
}
.loading .pic {
width: 64px;
height: 64px;
background: url(https://img-blog.csdn.net/20170921155431809);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- 遮挡页面 -->
<!-- <div class="loading">
<div class="pic"></div>
</div> -->
<!--
页面上主要的部分就是图像，因为一个代码它最大可能就是几十kb，jQuery库也就是90kb，那么一张图呢有的时候能达到1M，所以说有的时候这个图像是我们页面加载的重点，所以说在这里找几个比较大的图像，本地图像加载是比较快的，所以在网上找几个网络图像，为了让它加载的比较慢一点。我们这个用的是定时器，所以我们也不用太关注这个加载速度，到了固定时间之后就会自动显示我们的相关内容了
-->
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
$(function(){
var loading = '<div class="loading"><div class="pic"></div></div>';
$("body").append(loading);
setInterval(function(){
$(".loading").fadeOut();
/*3s之后内容就显示出来了，这种东西只是一种写死的数据，不是真正的反应加载的内容，所以这个方法也不是一个完全正确的方法，它只能解决一部分的问题。这个案例主要是给大家介绍一下，如果做一个这样的进度条，应该是采用一个什么样的布局结构*/
}, 3000);
});
</script>
</body>
</html>（二）通过加载状态事件制作进度条
使用定时器只能是针对一个固定的时间来加载内容，但是这种东西并不切合实际，那么在这里我们讲一个切合实际的东西，就是当我们内容真正加载完成之后再来显示内容。这里讲一下重点知识：
document.onreadystatechange页面加载状态改变时的事件
document.readyState返回当前文档的状态
uninitialized还未开始载入
loading载入中
interactive已加载，文档与用户可以开始交互
complete载入完成
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器2</title>
<style>
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.loading .pic {
width: 64px;
height: 64px;
background: url(https://img-blog.csdn.net/20170921155431809);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- 遮挡页面 -->
<div class="loading">
<div class="pic"></div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
document.onreadystatechange = function(){
/*我们先看一下返回当前文档的状态*/
//console.log(document.readyState);//interactive complete
if(document.readyState == "complete"){//如果内容已经完全加载成功
//将加载图片隐藏
$(".loading").fadeOut();
}
}
</script>
</body>
</html>这个内容是比较容易的，结果是简单粗暴的。但是效果比上个好多了。
（三）CSS3进度条小动画
之前的进度条只是用了一张图像，那么这个图像是比较小的，但是和代码比起来还是稍微要大一些的。从长远角度来讲，我们的代码可能会让页面加载速度更快一些，所以说我们尽量不用图像的时候还是不要引用图像。那么在这里，我们介绍一下CSS3的进度条小动画。在这里给大家提供一个网址，这个网址可以给大家提供一些进度条动画。当然有各种类型的动画条可以生成SVG，CSS，GIF的这几种格式。
下面我们用CSS动画实现一种加载效果：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条3</title>
<style>
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
}
.loading .pic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loading .pic i {
display: block;
float: left;
width: 6px;
height: 50px;
background: #399;
margin: 0 2px;
/*各个竖线的高度缩小到40%的长度*/
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
/*调用动画load，动画完成总时间为1.2s，连续做动画*/
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
/*设置每个竖线的延长时间，第一个不用延长时间，第二个依次延长0.1s*/
.loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
.loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
.loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
/*定义加载动画load*/
@-webkit-keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
/*完了以后不要忘记兼容性问题，复制CSS样式代码，打开一个网址（http://autoprefixer.github.io/）粘贴到左边的框里，右边会生成兼容性代码，然后复制，替换原来的CSS样式代码粘贴。*/
</style>
</head>
<body>
<!-- 遮挡页面 -->
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
document.onreadystatechange = function(){
if(document.readyState == "complete"){
$(".loading").fadeOut();
}
}
</script>
</body>
</html>这种方法结合第二个案例的js，其实是页面上最常使用的方法，所以说像一些这种CSS3的加载效果我们可以自己来写，如果你觉得这种东西很费劲，那么你可以使用www.loading.io然后来形成这样的一个CSS。我们只需要把代码粘贴到我们页面的CSS里面来，在
animation里面应用这个动画即可。
注意
CSS各种加载效果点击www.loading.io
CSS兼容性代码生成点击http://autoprefixer.github.io
今天我们先写到这里，下一节编辑定位在头部的进度条。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 常用的网页加载进度条之【定位在头部的进度条】
- 常用的网页加载进度条之【实时获取加载数据的进度条】
- js（jquery）网页进度条加载n中办法和原理（也有css3动画进度条）
- 通过网页加载状态事件制作进度条
- 常用的网页加载进度条
- jquery插件NProgress.js制作网页加载进度条
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
- 网页制作之CSS常用网站布局实例
- 网页代码常用小技巧总结续,网页制作学习
- 仿微信中加载网页时带线行进度条的WebView的实现
- 如何检测网页的加载进度。从而编写进度条
- NProgress.js一款炫酷的网页加载进度显示插件
- Silverlight 2学习教程（七）：在Silverlight 2.0中制作资源加载进度条
- Android自定义标题栏：显示网页加载进度
- HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
- 网页制作常用代码
- 用XMLHttpRequst对象实现真实的网页加载进度
- JavaScript实现网页加载进度条代码超简单
- 【Unity】场景异步加载的进度条制作
- Android自定义标题栏：显示网页加载进度