欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-18 20:16:46
...

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

小伙伴们，可以直接复制拿去运行！前提一定要引入jquery哦！

相关标签： 进度条加载 js加载页面 css3动画加载页面 loading页面

上一篇： 函数声明和函数表达式

下一篇： css3动画（2D）

推荐阅读