提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

网页 如何 详细 说明 页面 加载 判断 常见
2023-09-27 14:25:32 时间

文章目录

1. 文章引言

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

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

下载完成以后把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修改为：

<script>
    document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
        if (document.readyState == "complete") {//complete加载完成
            $(".loading").fadeOut();
        }
    }
</script>

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

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>

实现效果如下图所示：

在这里插入图片描述

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

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

<script>
    document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
        if (document.readyState == "complete") {//complete加载完成
            $(".loading").fadeOut();
        }
    }
</script>

这就达到了用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做的，效果如下图：

在这里插入图片描述

3. 文末总结


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

相关文章