常見的網頁載入進度條

weixin_34321977發表於2017-10-12
網頁

我們為什麼要做網頁載入進度條？
是為了讓使用者的等待不再枯燥，讓使用者有一個等待的目標.
為什麼要頁面載入？
這些網站開啟後網頁上面需要載入一些控制元件以使網頁上的一些程式能夠執行，從而顯現出相應的效果，如線上播放的視訊、FLASH都屬於這種情況，不同的效果對應的不同執行程式，這些執行程式你要看是哪裡開發的，有些是安全的，比如一些大家都知道的，像FLASH或者REAL的，但所有這些實際上都是要求在你的計算機上面下載並[執行程式]，原則上都是不安全的。

我們先用一個定時器做一個頁面載入（缺點：頁面載入時間是死的,無法根據內容多少來判斷是否要載入多長時間！！）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>定時器</title>
        <script type="text/javascript" src="css/jquery1.js">
            
        </script>
        
        <style type="text/css">
            *{
                margin: 0;
                padding: 0     ;
            }
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 64px;
                height: 64px;
            
                background: url("images/25.gif");
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <div class="loading">
        <div class="pic">
            
        </div>
    </div>
    <body>
    ![](圖片)![](圖片)![](圖片).....
        <script type="text/javascript">
            $(function(){
                setInterval(function(){
                    $(".loading").fadeOut();
                },3000)
            })
        </script>
    </body>
</html>

用一個簡單的js程式碼來做一個頁面載入

<!DOCTYPE html>
<html>
    <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: white;
            }
            .loading .pic{
                width: 64px;
                height: 64px;
            
                background: url("images/25.gif");
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="css/jquery1.js"></script>
        <script type="text/javascript">
            //document.onreadystatechange頁面載入狀態改變時的事件    
            document.onreadystatechange=function(){
                if(document.readyState=="complete");{
                    $(".loading").fadeOut();
                }
                
            }
        </script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                ![](images/25.gif)
            </div>
        </div>
        ![](圖片)![](圖片)![](圖片).....
    </body>
</html>

接下來教大家做一個定位在頭部的進度條

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        
            .loading{
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background: white;
            }
            .loading .pic{
                width: 0%;//起始是0
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: red
            }
            
        </style>
        <script type="text/javascript" src="css/jquery1.js"></script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                
            </div>
        </div>
     <header>
            ![](圖片)![](圖片)![](圖片).....
     </header>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"10%"},100) //每載入一個內容就執行一次js  
     </script>
     <banner>
        ![](圖片)![](圖片)![](圖片).....
     </banner>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"40%"},100)
     </script>
     <section>
            ![](圖片)![](圖片)![](圖片).....
     </section>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"70%"},100)
     </script>
     <div class="main">
            ![](圖片)![](圖片)![](圖片).....
     </div>
     <script type="text/javascript">
        $(".loading .pic").animate({width:"100%"},100,function(){
            $(".loading").fadeOut();//執行完成 隱藏進度條
        }
        )
     </script>
    </body>
</html>

實時獲取載入數值的進度條

<!DOCTYPE html>
<html>
    <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: white;
            }
            .loading .pic{
                width: 0%;
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                background: palegreen;
                font-size: 30px;
                text-align:center;
                line-height: 100px;
            }
            .loading .pic span{
                display: block;
                width: 80px;
                height: 80px;
                position: absolute;
                top: 10px;
                left: -10px;
                box-shadow: 0 3px 0 #666 ;
                border-radius: 50%;
                animation:rotate 1s infinite linear ;
            }
            @keyframes rotate{
                0%{
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="css/jquery1.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++;
                        //獲取數值並將數值顯示出來
                        $(".loading b").html(parseInt(num/$("img").size()*100)+"%");
                        if(num>=i){
                            $(".loading").fadeOut();
                        }
                    }
                    oImg.src=img[i].src;
                })
            })
        </script>
    </head>
    <body>
        <div class="loading">
            <div class="pic">
                <span id="">
                    
                </span>
                <b>0%</b>
            </div>
        </div>
              <img src=“”圖片“”>
              <img src=“”圖片“”>
              <img src=“”圖片“”>
            <img src=“”圖片“”>
            <img src=“”圖片“”>
            <img src=“”圖片“”>
            <img src=“”圖片“”>
    </body>
</html>

相關文章