详细说明常见的几种网页进度条，及如何判断页面已经加载完毕

一时失言乱红尘 2023-09-25 15:46 8阅读 0赞

#### 文章目录 ####

*  1. 文章引言
 *  2. loading方法
 *   *  2.1 直接使用定时器
     *  2.2 根据页面是否加载完毕来关闭loading效果
     *  2.3 用css3做进度条的效果
     *  2.4 实时获取加载数据
 *  3. 文末总结

## 1. 文章引言 ##

我们通常会使用`gif`动态图，来展示页面的加载效果，如下`gif`所示：

![在这里插入图片描述][a8a82e081ab341eba7ff6278b243489e.gif_pic_center]

![在这里插入图片描述][03c34703c9b141ae8587f02262229812.gif_pic_center]

因而，推荐一个自动生成`gif`图标的网站链接：[https://icons8.com/preloaders/][https_icons8.com_preloaders]，点击进去如下图所示：

![在这里插入图片描述][ffd9d4df114941d9993d8d2cd7b76ed4.png]

鼠标向下滑动，找到`gif`图片集，如下图所示：

![在这里插入图片描述][b50b6a69b75b4cda811a77e5e52abcbb.png]

在里面挑选好加载的效果图以后，点击下载，如下图所示：

![在这里插入图片描述][f567db2f412f4725bfbafa80ab34dcdd.png]

下载完成以后把`gif`图片保存到你项目的`img`文件夹中，方便使用。

## 2. loading方法 ##

### 2.1 直接使用定时器 ###

这种方法相对简单，如下代码代码所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>常见的网页进度条1</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(imgs/loading.gif);
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
        </style>
        <script src="../js/jquery-3.4.1.js"></script>
        <script>
            $(function () {
         
                //可使用jquery动态添加遮罩及loading效果
                // var loading = '<div class="loading"><div class="pic"></div></div>';
                //$("body").append(loading);
                //启动一个定时器
                setInterval(function () {
         
                    $(".loading").fadeOut();//3秒之后影藏
                }, 3000)
            })
        </script>
    </head>
    <body>
    <div class="loading">
        <div class="pic"></div>
    </div>
    <p>使用定时器的方法（不会判断页面加载，只是在定时器完成之后将也面显示出来）</p>
    <img src="./imgs/风景1.jpg" alt="风景1"/>
    <img src="./imgs/风景2.jpg" alt="风景2"/>
    <img src="./imgs/风景3.jpg" alt="风景3"/>
    <img src="./imgs/风景4.jpg" alt="风景4"/>
    <img src="./imgs/风景5.jpg" alt="风景5"/>
    <img src="./imgs/风景6.jpg" alt="风景6"/>
    <img src="./imgs/风景7.jpg" alt="风景7"/>
    <img src="./imgs/风景8.jpg" alt="风景8"/>
    </body>
    </html>

这种方法是直接给一个时间，等结束以后，加载效果消失。

但这种方法，并不能判断页面是否已经加载完毕。虽然简单粗暴，但显然这并不是我们想要的结果。

### 2.2 根据页面是否加载完毕来关闭loading效果 ###

首先，咱们要想知道页面是否加载完毕，需要知道以下几点：

1.  `document.onreadystatechange`加载状态改变时的事件
2.  `document.readyState` 当前文档的状态
    
     *  `.uninitialized` 还未开始载
     *  `.loading` 载入中
     *  `.interactive` 已加载，文档和永和可以开始交互
     *  `.complete` 载入完成

我们不使用定时器的方法，直接来判断页面是否加载完毕，去决定`loading`效果的关闭与否，那么直接将上述代码中的`js`修改为：

我们用到最多的方法就是此方法，因为，它能判断出来页面是否真的已经加载完毕。

### 2.3 用css3做进度条的效果 ###

如上两个方法都是用的`gif`图，我们使用`css3`怎么来实现加载额效果呢？这个要用`transform`属性以及`animation`动画，如下代码所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用css3加载页面</title>
        <style type="text/css">
            .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;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
    
            .loading .pic i {
         
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background-color: #399;
                margin: 0 2px;
                transform: scaleY(.4);
                animation: load 1.2s infinite;
            }
    
            .loading .pic i:nth-child(1) {
         
            }
    
            .loading .pic i:nth-child(2) {
         
                animation-delay: .1s;
            }
    
            .loading .pic i:nth-child(3) {
         
                animation-delay: .2s;
            }
    
            .loading .pic i:nth-child(4) {
         
                animation-delay: .3s;
            }
    
            .loading .pic i:nth-child(5) {
         
                animation-delay: .4s;
            }
    
            @keyframes load {
         
                0%, 40%, 100% {
         
                    transform: scaleY(.4);
                }
                20% {
         
                    transform: scaleY(1);
                }
            }
        </style>
    </head>
    <body>
    <div class="loading">
        <div class="pic">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
    
    </body>
    </html>

实现效果如下图所示：

![在这里插入图片描述][75a8eb9f6b7647128f7b4bb475ff17c1.png]

写好这些以后，动画就已经产生了。

接下来，可将第二种方法的`js`粘贴过来，即如下代码：

这就达到了用`css3`来实现页面加载的一个动画效果了。

### 2.4 实时获取加载数据 ###

此外，还有一种加载方式，即实时获取加载数据，就是百分数的那种效果，如下代码所示：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>实时加载数据</title>
    
        <style type="text/css">
            * {
         
                margin: 0;
                padding: 0;
            }
    
            .loading {
         
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
    
            .loading .pic {
         
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                font-size: 30px;
                text-align: center;
                line-height: 100px;
            }
    
            .loading .pic span {
         
                display: block;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 10px;
                left: 10px;
                border-radius: 50%;
                box-shadow: 0 3px 0 #666;
                animation: rotate 1s infinite linear;
                -webkit-animation: rotate 1s infinite linear;
            }
    
            @-webkit-keyframes rotate {
         
                0% {
         
                    -webkit-transform: rotate(0deg);
                }
                100% {
         
                    -webkit-transform: rotate(360deg);
                }
            }
    
            @keyframes rotate {
         
                100% {
         
                    transform: rotate(360deg);
                }
            }
    
            ；
    
        </style>
    </head>
    <body>
    <div class="loading">
        <div class="pic">
            <span></span>
            <b>0%</b>
        </div>
    </div>
    
    <img class="imgs" src="./imgs/风景1.jpg" alt="风景1"/>
    <img class="imgs" src="./imgs/风景2.jpg" alt="风景2"/>
    <img class="imgs" src="./imgs/风景3.jpg" alt="风景3"/>
    <img class="imgs" src="./imgs/风景4.jpg" alt="风景4"/>
    <img class="imgs" src="./imgs/风景5.jpg" alt="风景5"/>
    <img class="imgs" src="./imgs/风景6.jpg" alt="风景6"/>
    <img class="imgs" src="./imgs/风景7.jpg" alt="风景7"/>
    <img class="imgs" src="./imgs/风景8.jpg" alt="风景8"/>
    
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function () {
         
            var img = $(".imgs");//首先获取所有的Img对象
            var num = 0;//定义一个变量，赋值给b标签用
            img.each(function (i) {
         //遍历获取到的所有img
                var oImg = new Image();//new一个新对象
                oImg.onload = function () {
         //使用onload方法，在加载完成后执行
                    oImg.onload = null;//首先清除掉缓存
                    num++;//每次加载的过程中num++，即执行次数
                    $(".loading b").html(parseInt(num / img.length * 100) + "%");//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数
                    if (num >= i) {
         
                        $(".loading").fadeOut();//当num的值大于等于个数时隐藏
                    }
                }
                oImg.src = img[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
            })
        })
    </script>
    </body>
    </html>

这种效果，在页面中也比较常见，也是用`css3`做的，效果如下图：

![在这里插入图片描述][d4b636d47de2401fbe4800dfad9a3fb4.png]

## 3. 文末总结 ##

具体使用哪种方式，动态加载页面，可以根据项目需求来。

[a8a82e081ab341eba7ff6278b243489e.gif_pic_center]: https://img-blog.csdnimg.cn/a8a82e081ab341eba7ff6278b243489e.gif#pic_center
[03c34703c9b141ae8587f02262229812.gif_pic_center]: https://img-blog.csdnimg.cn/03c34703c9b141ae8587f02262229812.gif#pic_center
[https_icons8.com_preloaders]: https://icons8.com/preloaders/
[ffd9d4df114941d9993d8d2cd7b76ed4.png]: https://img-blog.csdnimg.cn/ffd9d4df114941d9993d8d2cd7b76ed4.png
[b50b6a69b75b4cda811a77e5e52abcbb.png]: https://img-blog.csdnimg.cn/b50b6a69b75b4cda811a77e5e52abcbb.png
[f567db2f412f4725bfbafa80ab34dcdd.png]: https://img-blog.csdnimg.cn/f567db2f412f4725bfbafa80ab34dcdd.png
[75a8eb9f6b7647128f7b4bb475ff17c1.png]: https://img-blog.csdnimg.cn/75a8eb9f6b7647128f7b4bb475ff17c1.png
[d4b636d47de2401fbe4800dfad9a3fb4.png]: https://img-blog.csdnimg.cn/d4b636d47de2401fbe4800dfad9a3fb4.png