js（jquery）網頁進度條加載n中辦法和原理（也有css3動畫進度條）

原創 小飞飞007 2020-02-21 00:55

有時候網站內容比較多，或者網絡不太好，客戶剛打開url看到是空白，內容都在加載中，過一會才能看到網頁內容，這樣的體驗特別糟糕，不耐煩的客戶會直接關閉頁面，假設能在等待的時候加一些初始動畫或者加載進度條，會讓客戶體驗好很多，今天小飛飛就帶大家做一些進度條的那些事。

1.最常見的進度條製作，利用setInterval（）延遲顯示主頁面，但是隻是一個障眼法，並不能檢測頁面內容是否真正加載完畢//上代碼
注意！代碼中引入都是大圖片，讓加載更慢，就是爲了更好的看加載效果

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    *{padding:0px;margin:0px;list-style-type: none;}
      #mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
     .loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);} 
  </style>
</head>
<body>
  <!-- 加載狀態 -->
 <div id="mask"></div>
 <div class="loading"><img src="img/loading.gif" width="50"></div>
  <!-- 加載狀態end -->
 <img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
 <img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
 <img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
 <img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
    $(function(){
        setInterval(function(){
            $("#mask").css("display","none")
            $(".loading").css("display","none")
        },3000) 

    })()
</script>
</body>
</html>

2.利用document.onreadystatechang事件 和readyState的complete，在頁面載如完成的時候讓加載部件消失,這種用的比較多，也是比較常見的！來看代碼！
注意！代碼中引入都是大圖片，讓加載更慢，就是爲了更好的看加載效果

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    *{padding:0px;margin:0px;list-style-type: none;}
      #mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
     .loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);} 
  </style>
</head>
<body>
  <!-- 加載狀態 -->
 <div id="mask"></div>
 <div class="loading"><img src="img/loading.gif" width="50"></div>
  <!-- 加載狀態end -->
 <img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
 <img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
 <img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
 <img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
   document.onreadystatechange=function(){
    if(document.readyState=='complete'){
                $("#mask").css("display","none")
                $(".loading").css("display","none")
            }
   }
</script>
</body>
</html>

3.有的同學可能想要那種加載進度條的那種，來來！上代碼！這種是利用文檔的一個由上到下的加載順序在中間加animate動畫 ！看代碼！

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    *{padding:0px;margin:0px;list-style-type: none;}
      #mask{width:0%;position: fixed;top:0px;z-index:100;background:#000;height:5px;background:red;}
    /* .loading{position: fixed;top:50%;left:50%;z-index: 101;transform:translate(-50%,-50%);} */
  </style>
  <script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
</head>
<body>
  <!-- 加載狀態 -->
 <!-- <div id="mask"></div>
 <div class="loading"><img src="img/loading.gif" width="50"></div> -->
  <!-- 加載狀態end -->
  <div id="mask"></div>
 <img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"10%"},100)
 </script>  <!-- 加載一部分改變mask的寬度動畫 -->
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"40%"},100)
 </script><!-- 加載一部分改變mask的寬度動畫 -->
 <img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"60%"},100)
 </script><!-- 加載一部分改變mask的寬度動畫 -->
 <img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"70%"},100)
 </script><!-- 加載一部分改變mask的寬度動畫 -->
 <img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"80%"},100)
 </script><!-- 加載一部分改變mask的寬度動畫 -->
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"100%"},100)
 </script><!-- 加載一部分改變mask的寬度動畫 -->


</body>
</html>

4.有的同學坐不住了！尼瑪人家要有那種百分比數字加載那種 比如顯示0%到100%那種變化！好！可以可以！都上！先講原理：一般網站中圖片加載佔的時間是比較多的，佔網站加載時間的80%以上，那些html文件什麼的太小了對於圖片來說，所以我們只要統計出圖片的加載時間，基本就是網站的加載時間，然後把這些時間分開，每個圖片加載需要多少時間之後計算顯示！來來！上代碼！說半天都不知道說啥！sb樓主。。。。

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    *{padding:0px;margin:0px;list-style-type: none;}
      #mask{width:100%;position: fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:100;background:#000;}
     .loading{position: fixed;top:50%;left:50%;z-index: 101;
        width:50px;height:50px;
        transform:translate(-50%,-50%);
        border-radius:25px;
        box-shadow: 3px 3px 3px #ccc;
        animation:circle 1s infinite linear;
     }
     @keyframes circle{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
     } 
     .loading_number{
        position: fixed;top:50%;left:50%;
        width:50px;height:50px;
        z-index: 101;/*transform:translate(-50%,-50%);*/
        text-align: center;
        line-height: 50px;
        color:white;
     }
  </style>
</head>
<body>
  <!-- 加載狀態 -->
 <div id="mask"></div>
 <div class="loading"></div>
 <div class="loading_number">0%</div>
  <!-- 加載狀態end -->
 <img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1403/01/c0/31671078_1393641119421.jpg">
 <img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
 <img src="http://i7.download.fd.pchome.net//g1/M00/0D/1A/oYYBAFS_YAyIaAk8AAp5Fvf_uncAACPcAGgRZoACnku700.jpg">
 <img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
 <img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1401/27/c1/30908050_1390815163453.jpg">
<script type="text/javascript" src="js/jquery.js"></script> <!-- 引入jquery -->
<script type="text/javascript">
    var imgs=$("img") //獲取到網頁所有圖片的節點
    var num=0
    imgs.each(function(index){
        var oimg=new Image() //實例化一個img對象
        oimg.οnlοad=function(){ //一個圖片對象加載完之後讓loading——number中的數字變化，沒加載完一個就變化一次直到加載完所有讓遮罩消失
            num++
             $(".loading_number").html(parseInt(num/(imgs.size())*100)+"\%") //計算一個多少個圖片，一個圖片佔百分多少
             if(num==(imgs.size())){ //當最後一張圖片加載完之後我們讓遮罩層延遲消失；當讓也可以不設置延遲消失，這樣做只是爲了能看到走到100%
                setTimeout(function(){
                    $("#mask").css("display","none")
                    $(".loading").css("display","none")
                    $(".loading_number").css("display","none")
                 },100)
             }
        }
        oimg.src=imgs[index].src  //
    })
</script>
</body>
</html>

小夥伴們，可以直接複製拿去運行！前提一定要引入jquery哦！

小飛飛007
發佈了27 篇原創文章 · 獲贊 20 · 訪問量 3萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章