• 小功能1：多种方法实现网页加载进度条

    方法一：使用定时器

                说明：定时器中放一个全屏的背景色，并添加一个gif图片，规定n秒后再隐藏此背景，给后台加载留一定时间。

                缺点：当本地已有缓存时，还是会执行此定时器，体验不佳

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>定时器进度条</title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("body").append('<div class="loading"><img src="img/Flower.gif" ></div>');
                setTimeout(function(){
                    $(".loading").fadeOut();
                },3000)
            })
        </script>
        <style type="text/css">
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: #fff;
            }
            .loading img{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        
        <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" >
        <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" >
</html>

    方法二：document.onreadystatechange监控加载状态

               说明：document.onreadystatechange（页面加载状态改变的事件）；              

    　　　　document.readyState：

    　　　　状态值：uninitialized（还未开始载入），loading（载入中），interactive（已加载，文档与用户可以开始交互），complete（载入完成）。

    　　　　下面代码中用css3绘制了一个预加载时显示的小动画，当然也可引用已有的图片。核心代码为划线部分

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>进度条-readyState</title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                document.onreadystatechange = function(){
                    if(document.readyState == "complete"){
                        $(".loading").fadeOut();
                    }
                }
            })
        </script>
        <style type="text/css">
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: #fff;
            }
            
            /* 绘制进度条图形 */
            .myicon {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 50px;
                height: 30px;
                
            }
            .myicon-item {
                width: 5px;
                height: 10px;
                background-color: green;
                float: left;
                margin-right: 5px;
                -webkit-animation: myicon 1s infinite;
                        animation: myicon 1s infinite;
            }
            .item1 {
                -webkit-animation-delay: -1s;
                        animation-delay: -1s;
            }
            .item2 {
                -webkit-animation-delay: -0.9s;
                        animation-delay: -0.9s;
            }
            .item3 {
                -webkit-animation-delay: -0.8s;
                        animation-delay: -0.8s;
            }
            .item4 {
                -webkit-animation-delay: -0.7s;
                        animation-delay: -0.7s;
            }
            .item5 {
                -webkit-animation-delay: -0.6s;
                        animation-delay: -0.6s;
            }
            @-webkit-keyframes myicon {
                0% 100%{
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
                50% {
                    -webkit-transform: scaleY(3);
                            transform: scaleY(3);
                }
            }
            @keyframes myicon {
                0% 100%{
                    -webkit-transform: scaleY(1);
                            transform: scaleY(1);
                }
                50% {
                    -webkit-transform: scaleY(3);
                            transform: scaleY(3);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="myicon">
                <div class="myicon-item item1"></div>
                <div class="myicon-item item2"></div>
                <div class="myicon-item item3"></div>
                <div class="myicon-item item4"></div>
                <div class="myicon-item item5"></div>
            </div>
        </div>
        
        <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" >
        <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" >
</html>

    方法三：给页面中重要节点后添加js代码，改变进度条显示（以显示在页面头部的进度条为例）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>进度条-头部</title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: #fff;
            }
            .loading .progress {
                position: absolute;
                top: 0;
                left: 0;
                width: 0%;
                height: 3px;
                background-color: #f33;
            }
            
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="progress"></div>
        </div>
        <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "10%"},100)
        </script>
        <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "30%"},100)
        </script>
        <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "50%"},100)
        </script>
        <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "70%"},100)
        </script>
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "90%"},100)
        </script>
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" >
        <script type="text/javascript">
            $(".loading .progress").animate({width : "100%"},100,function(){
                $(".loading").fadeOut();
            })
        </script>
</html>

    方法四：实时监控页面中加载情况，显示响应百分比（页面加载进度慢，一般都是图片、视频、音频较多，以下以图片为例，根据图片加载进度显示页面加载百分比）

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>进度条-百分比</title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                var sum = 0;
                var $img = $("body img");
                $img.each(function(i){
                    var proImage = new Image();
                    proImage.onload = function(){
                        proImage.onload = null;
                        sum++;
                        var progress = parseInt(sum/$img.length * 100);
                        $(".loading .progress b").text(""+progress + "%");
                        if(sum >= i){
                            $(".loading").fadeOut();
                        }
                    }
                    proImage.src = $img[i].src;//若将赋值放在onload之前,当页面第二次加载时,将直接赋src值,不会再执行onload事件
                })
            })
        </script>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                background: #fff;
            }
            .loading .progress{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                width: 100px;
                height: 100px;
                text-align: center;
                line-height: 100px;
                font-size: 22px;
            }
            
            .loading .progress span {
                display: block;
                position: absolute;
                left: 10px;
                top: 10px;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                -webkit-box-shadow: 0 3px 0 #666;
                        box-shadow: 0 3px 0 #666;
                -webkit-animation: myicon 1s infinite linear;
                        animation: myicon 1s infinite linear;
            }
            @-webkit-keyframes myicon {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }
            @keyframes myicon {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="progress">
                <span></span>
                <b>0%</b>
            </div>
        </div>
        <img src="http://img1.imgtn.bdimg.com/it/u=3794341811,198002972&fm=26&gp=0.jpg" >
        <img src="http://img0.imgtn.bdimg.com/it/u=3081910561,4232742603&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=3924851449,159537211&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=4135296269,1136301264&fm=26&gp=0.jpg" >
        <img src="http://img1.imgtn.bdimg.com/it/u=2623748191,2154445708&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4199878529,2086225900&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=4015368002,1586221549&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=246009171,2070901793&fm=26&gp=0.jpg" >
        <img src="http://img5.imgtn.bdimg.com/it/u=2721573031,3342097622&fm=26&gp=0.jpg" >
        <img src="http://img2.imgtn.bdimg.com/it/u=56560423,3204706921&fm=26&gp=0.jpg" >
</html>

     笨鸟学习途中，有问题尽管提，谢谢
  • 相关阅读:
    特性（Attribute）
    泛型
    AngularJS 基础用法
    js date相关学习!
    android 数据存储分配的一些事
    angularjs model.service vs provider vs factory?
    angularJS 判断
    zepto.js 学习之(一)
    angularJS Directive学习
    AngularJS继续中
  • 原文地址：https://www.cnblogs.com/duanzhenzhen/p/10155684.html
Copyright © 2020-2023  润新知