常用的网页加载进度条之【实时获取加载数据的进度条】

最新推荐文章于 2024-06-09 09:49:42 发布

WJM_Aunt

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量3.6k

点赞数 1

分类专栏： jquery css 文章标签：前端 CSS jQuery

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

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

之前我们做的进度条都是动画，没有获取实时数据。有些网站是从0到100%逐渐过渡的，也能看到相应数字的变化，那么用户在等待时候看到数字心里还是有个底的，等到了100%的时候就可以加载数据，比之前的方法可能更加好用一些。

课程知识点

建立图像对象：图像对象名称 = new Image()
属性：border complete height ……
事件：onload onerror onkeydown onkeypress ……
src 属性一定要写到 onload 后面，否则程序在IE中会出错

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>进度条5</title>
        <style>
            * {
                padding: 0;
                margin: 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;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                font-size: 25px;
                text-align: center;
                line-height: 100px;
            }
            .loading .pic span {
                display: block;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 10px;
                left: 10px;
                /* background: #066; */
                border-radius: 50%;
                box-shadow: 0 3px 0 #666;
                -webkit-animation: rotate 1s infinite linear;
                animation: rotate 1s infinite linear;
            }
            @-webkit-keyframes rotate {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }
            @keyframes rotate {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                <!--外面的圈圈-->
                <span></span>
                <!--数据加载进度（百分比数字）-->
                <b>0%</b>
            </div>
        </div>

        <img src="http://f.hiphotos.baidu.com/zhidao/pic/item/8b82b9014a90f60326b707453b12b31bb051eda9.jpg">
        <img src="http://pic5.qiyipic.com/common/20130524/7dc5679567cd4243a0a41e5bf626ad77.jpg?src=focustat_4_20130527_7">
        <img src="http://b.hiphotos.baidu.com/zhidao/pic/item/908fa0ec08fa513d2fd87b813b6d55fbb2fbd97a.jpg">
        <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/14ce36d3d539b60075f33ca9ef50352ac65cb7ea.jpg">
        <img src="http://scimg.jb51.net/allimg/151109/14-151109164045494.jpg">
        <img src="http://2t.5068.com/uploads/allimg/151024/48-151024111511-50.jpg">
        <img src="http://f.hiphotos.baidu.com/zhidao/pic/item/8b82b9014a90f60326b707453b12b31bb051eda9.jpg">
        <img src="http://pic5.qiyipic.com/common/20130524/7dc5679567cd4243a0a41e5bf626ad77.jpg?src=focustat_4_20130527_7">
        <img src="http://b.hiphotos.baidu.com/zhidao/pic/item/908fa0ec08fa513d2fd87b813b6d55fbb2fbd97a.jpg">
        <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/14ce36d3d539b60075f33ca9ef50352ac65cb7ea.jpg">
        <img src="http://scimg.jb51.net/allimg/151109/14-151109164045494.jpg">
        <img src="http://2t.5068.com/uploads/allimg/151024/48-151024111511-50.jpg">

        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
        <script>
            $(function(){
                var img = $("img");
                var num = 0;

                img.each(function(i){               
                    var oImg = new Image();

                    oImg.onload = function(){
                        /*清掉重复请求*/
                        oImg.onload = null;

                        num ++;
                        var load = parseInt(num/$("img").size()*100)+"%";
                        $(".loading b").html(load);
                        if(num >= i){
                            $(".loading").fadeOut();
                        }
                    }

                    oImg.src = img[i].src;
                });
            });
        </script>
    </body>
</html>