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

最新推荐文章于 2023-01-27 21:02:20 发布

WJM_Aunt

最新推荐文章于 2023-01-27 21:02:20 发布

阅读量875

点赞数

分类专栏： css jquery 文章标签： css3 动画

本文链接：https://blog.csdn.net/WJM_Aunt/article/details/78045668

版权

本文介绍如何创建网页加载进度条，纠正定时器误区，通过加载状态事件实现真实进度，并利用CSS3制作小动画。内容包括网页加载状态事件、CSS3进度条动画的实现方法和资源推荐。

摘要由CSDN通过智能技术生成

一、课程介绍

随着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">
        <im