碼上快樂

相關內容    簡體    繁體

小功能1：多種方法實現網頁加載進度條

本文轉載自   查看原文   2018-12-21 14:50   1475    小功能

方法一：使用定時器

            說明：定時器中放一個全屏的背景色，並添加一個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>

 笨鳥學習途中，有問題盡管提，謝謝


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 前端網頁加載進度條的實現 網頁加載進度條的實現 網頁加載進度條 webview添加網頁加載進度條 網頁、web進度條簡單實現 頁面加載進度條的實現 vue 實現頁面加載進度條 iOS之小功能模塊--彩虹動畫進度條學習和自主封裝改進 pace.js – 網頁自動加載進度條插件 iOS WKWebView添加網頁加載進度條(轉)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM