常用的网页加载进度条之【制作进度条】

川长思鸟来 2022-06-08 09:05 815阅读 0赞

### 一、课程介绍 ###

随着HTML5的普及，各种CSS3动画及JS特效在网页中层出不穷，PC端载入数据的速度还算可以，移动端相对要慢得多，如果图片或脚本没有完全载入，用户在操作中可能会发生各种问题，因此我们需要对数据载入进行侦测，以更快人性化的方式给用户展现。

下来我们通过几个页面来看一下网上有哪些常见的进度条。

（1）阿里的字体库[阿里字体库][Link 1]

会发现有个等待的小动画，那三个变换的小圈圈，这个页面比较简单，内容一下子就加载出来了

（2）再来看一下hao123[hao123][]

这里的内容比较多一点，会发现网页加载的时候，页面上方会有一条绿色的线条从左到右的一个进度。

（3）还有一些国外的网站，我们再来看一下。国内的网站加载速度一般都比较快。[TOTAL:SpaceTravellers][TOTAL_SpaceTravellers]

这个加载的期间，其实就是一个CSS的一个小动画，这个显得有点枯燥了

（4）还有一些网站，点击进去它的加载方式是计时，就是从0一直到100%的时候，咱们看到具体的数据，我们也能够清楚还有多长时间可以进入我们的主体页面。[Proud & Punch |][Proud _ Punch]

网上这些效果是特别的多的，所以我给大家介绍了几个内容。

现在我们开始学习。

**预备知识**

*  代码编辑器
 *  HTML5+CSS3-网页排版
 *  JavaScript-通过函数写特效

### 二、制作进度条 ###

#### （一）网页加载进度条误区 ####

有人认为进度条是不是可以给它一个定时器，比如说让它延迟3秒钟或者延迟5秒钟之后再来加载我们的相关内容，这种方法并不是说不行，那么我们这个网页延迟3秒钟之后呢，大多数的图像或者主体已经加载过来了，也是可以的。

这种用定时器的方法可以解决一部分的问题，但是弊端也是非常大的。比如说页面已经打开过了，已经缓存在本地了，那么我们再用定时器的时候，它这个效率肯定是比较低的。因为无论有没有这个缓存，它都要执行这个3秒钟的延迟，所以说这个效率和体验都不太良好。

之所以很多同学会用这个定时器，因为在网上搜索的时候，有很多这个进度条都是根据定时器来做的。比如在百度上面搜索一下信息[进度条][Link 2]，随便打开一个，[预览一下][Link 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>
            
            
            
            <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的进度条小动画。在这里给大家提供一个[网址][Link 4]，这个网址可以给大家提供一些进度条动画。当然有各种类型的动画条可以生成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][http_autoprefixer.github.io]

今天我们先写到这里，下一节编辑定位在头部的进度条。

[Link 1]: http://iconfont.cn/
[hao123]: https://www.hao123.com/
[TOTAL_SpaceTravellers]: https://www.totaltankstelle.de/spacetravellers/
[Proud _ Punch]: http://www.proudandpunch.com.au/
[Link 2]: http://sc.chinaz.com/tag_jiaoben/JinDuTiao.html
[Link 3]: http://sc.chinaz.com/jiaobendemo.aspx?downloadid=201732330321
[Link 4]: https://loading.io/
[http_autoprefixer.github.io]: http://autoprefixer.github.io/