js（jquery）网页进度条加载n中办法和原理（也有css3动画进度条）

最新推荐文章于 2021-05-30 23:28:56 发布

小飞飞007

最新推荐文章于 2021-05-30 23:28:56 发布

阅读量934

点赞数 3

分类专栏： js各种进度条制作文章标签：进度条加载 js加载页面 css3动画加载页面 loading页面

本文链接：https://blog.csdn.net/qq_37983691/article/details/77062482

版权

js各种进度条制作专栏收录该内容

1 篇文章 0 订阅

订阅专栏

有时候网站内容比较多，或者网络不太好，客户刚打开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.onload=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>