Mr.J--网页进度条

最新推荐文章于 2023-03-10 07:45:10 发布

End_less__

最新推荐文章于 2023-03-10 07:45:10 发布

阅读量260

点赞数 1

分类专栏： Javascript学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/97038755

版权

Javascript学习专栏收录该内容

49 篇文章 1 订阅

订阅专栏

本文介绍了网页加载进度条的实现，包括定时器方法、通过onreadystatechange事件、CSS3小动画、页面头部进度条以及实时监测页面加载情况。利用jQuery、DOM操作和自定义动画，为用户提供页面加载状态的视觉反馈。

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

网页进度条是一般网页加载完成之前，在页面中显示，以便于给用户信息让他知道网页加载情况。我主要写五种常见的进度条加载方式。

用到的知识点：

Mr.J-- jQuery学习笔记(十八)--自定义动画

Mr.J-- jQuery学习笔记(二十八)--DOM操作方法(添加方法总结)

定时器

话不多说，直接上代码

页面样式

<style>
.loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgb(255, 241, 206);
}
.loading .pic{
    width: 282px;
    height: 285px;
    /* border: 1px solid red; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
</style>

Javascript

<script>
    $(function(){
        var loading='<div class="loading"><div class="pic"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563790660498&di=75c25c2b6b0a7e8474e7dfd202badae8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018c64598bc4b3000000212993ed46.gif" alt="" class="src"></div></div>'
        $("body").append(loading);

        setInterval(function(){
            $(".loading").fadeOut();
        }, 3000);
    })
</script>

上面代码可以看见，使用定时器方法 setInterval进行定时，在时间到达之后，进行页面的展示

通过调用事件

onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。

定义和用法

readyState 属性返回当前文档的状态（载入中……）。

该属性返回以下值:

uninitialized - 还未开始载入
loading - 载入中
interactive - 已加载，文档与用户可以开始交互
complete - 载入完成

语法

document.readyState

页面样式与上面一致，JavaScript:

document.onreadystatechange = function(){
        //  uninitialized   --还未开始载入
        //  loading         --载入中
        //  interactive     --已加载，文档与用户可以开始交互
        //  complete        --载入完成

         if(document.readyState == "complete"){
             $(".loading").fadeOut();
         }
     }

<body>
    <div class="loading">
        <div class="pic">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563790660498&di=75c25c2b6b0a7e8474e7dfd202badae8&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F018c64598bc4b3000000212993ed46.gif"
                alt="" class="src">s
        </div>
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789927674&di=a0c2e498720ffe1e57e4775512127dbc&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775523952.jpg"
        alt="" class="src">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789977748&di=f6dbca9812121463eb95238811882e56&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2Fattachments2%2Fday_120505%2F12050500451a619ddc02b01932.jpg"
        alt="" class="src">
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789986452&di=e7792fd26ec078a03ab2e84e00e88ff2&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775582570.jpg"
        alt="" class="src">
</body>

当文档载入完成之后，调用相关方法进行页面的展示。

CSS3小动画

在第二种方法的基础上增加动画展示

<div class="loading">
        <div class="pic">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>

小动画对应的样式设置(其余与上方一致)

.loading .pic i {
        display: block;
        float: left;
        width: 6px;
        height: 50px;
        background: aqua;
        margin: 0 2px;
        -webkit-transform: scaleY(0.4);
        transform: scaleY(0.4);
        -webkit-animation: load 1.2s infinite;
        animation: load 1.2s infinite;
    }
    .loading .pic i:nth-child(1){-webkit-animation-delay: 0.0s; animation-delay: 0.0s;}
    .loading .pic i:nth-child(2){-webkit-animation-delay: 0.15s;animation-delay: 0.15s;}
    .loading .pic i:nth-child(3){-webkit-animation-delay: 0.30s;animation-delay: 0.30s;}
    .loading .pic i:nth-child(4){-webkit-animation-delay: 0.45s;animation-delay: 0.45s;}
    .loading .pic i:nth-child(5){-webkit-animation-delay: 0.60s;animation-delay: 0.60s;}

    @keyframes load{
        0%,40%,100%{
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }
        20%{
        -webkit-transform: scaleY(1);
         transform: scaleY(1)   
        }
    }

页面头部进度条

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>头部进度条加载</title>
</head>
<style>
.loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background: rgb(255, 241, 206);
    }

    .loading .pic {
        width: 0%;
        height: 10px;
        /* border: 1px solid red; */
        position: absolute;
        top: 0;
        left: 0;
        background: red;
    }
</style>
<script src="./jquery.min.js"></script>
<body>
    <div class="loading">
        <div class="pic">
        </div>
    </div>
    <header></header>
    <script>
            $(".loading .pic").animate({width:"30%"},100);
        </script>
    <section class="banner">
        <img class="mine"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789927674&di=a0c2e498720ffe1e57e4775512127dbc&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775523952.jpg"
            alt="" class="src">

    </section>
    <script>
            $(".loading .pic").animate({width:"50%"},100);
        </script>
    <section class="about">

        <img class="mine"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789986452&di=e7792fd26ec078a03ab2e84e00e88ff2&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775582570.jpg"
            alt="" class="src">
    </section>
    <script>
            $(".loading .pic").animate({width:"80%"},100);
        </script>
    <section class="pro">
        <img class="mine"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789977748&di=f6dbca9812121463eb95238811882e56&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2Fattachments2%2Fday_120505%2F12050500451a619ddc02b01932.jpg"
            alt="" class="src">
    </section>
    <script>
            $(".loading .pic").animate({width:"100%"},100);
        </script>
    <section class="news">
        <img class="mine"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789986452&di=e7792fd26ec078a03ab2e84e00e88ff2&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775582570.jpg"
            alt="" class="src">
    </section>
    <footer>
            <img class="mine"
            src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789977748&di=f6dbca9812121463eb95238811882e56&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2Fattachments2%2Fday_120505%2F12050500451a619ddc02b01932.jpg"
            alt="" class="src">
    </footer>

    <script>
            $(".loading .pic").animate({width:"100%"},100,function(){
                $(".loading").fadeOut();
            });
        </script>
</body>

</html>

实时监测页面加载情况

Javascript

$(function(){
        // var img = new Image();
        // img.onload = function(){

        // }
       // img.src= "1212.jpg";

       var img = $("img");
       var num=0;
       img.each(function(i){
           var oImg = new Image();

           oImg.onload = function(){
		   //清空缓存
            oImg.onload = null;
			//统计
            num++;
            //toFixed 保留几位小数
            $(".loading b").html((num/$("img").size()*100).toFixed(1)+"%");
            // $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
			//下面的if条件为了避免缓存，下次加载num==i的情况
            if(num > i){
                $(".loading").fadeOut();
            }
           }
		   //获取图片信息
           oImg.src = img[i].src;

       })
    })

<div class="loading">
        <div class="pic">
            <span></span>
            <b>0%</b>
        </div>
    </div>
    <img class="mine"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789927674&di=a0c2e498720ffe1e57e4775512127dbc&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775523952.jpg"
        alt="" class="src">
    <img class="mine"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789977748&di=f6dbca9812121463eb95238811882e56&imgtype=0&src=http%3A%2F%2Fattachments.gfan.net.cn%2Fforum%2Fattachments2%2Fday_120505%2F12050500451a619ddc02b01932.jpg"
        alt="" class="src">
    <img class="mine"
        src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563789986452&di=e7792fd26ec078a03ab2e84e00e88ff2&imgtype=0&src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F2560x1600%2F1429775582570.jpg"
        alt="" class="src">

* {
        padding: 0;
        margin: 0;
    }

    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background: #fff;
    }

    .loading .pic {
        width: 100px;
        height: 100px;
        /* border: 1px solid red; */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        font-size: 30px;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        text-align: center;
        line-height: 100px;
    }

    .loading .pic span{
        display: block;
        width: 80px;
        height: 80px;
        position: absolute;
        top: 10px;
        left: 10px;
        /* background: white; */
        border-radius: 50%;
        box-shadow: 0 3px 0 #666;
        -webkit-animation: rotate 1s infinite linear;
        animation: rotate 1s infinite linear;
    }


    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes rotate{
        0%{
            -webkit-transform: rotate(0deg);
        }
        100%{
            -webkit-transform: rotate(360deg);
        }
    }