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

2023.06.10 | admin | 148次围观

有时候网站内容比较多，或者网络不太好，客户刚打开url看到是空白，内容都在加载中，过一会才能看到网页内容，这样的体验特别糟糕，不耐烦的客户会直接关闭页面加载时候的进度条 js加载时候的进度条 js，假设能在等待的时候加一些初始动画或者加载进度条，会让客户体验好很多，今天小飞飞就带大家做一些进度条的那些事。

1.最常见的进度条制作，利用setInterval（）延迟显示主页面，但是只是一个障眼法，并不能检测页面内容是否真正加载完毕//上代码

注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果


<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>
  
 <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> 
<script type="text/javascript">
    $(function(){
        setInterval(function(){
            $("#mask").css("display","none")
            $(".loading").css("display","none")
        },3000) 
    })()
script>
body>
html>

2.利用document.onreadystatechang事件和readyState的complete，在頁面載如完成的時候让加载部件消失,这种用的比较多，也是比较常见的！来看代码！

注意！代码中引入都是大图片，让加载更慢，就是为了更好的看加载效果


<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>
  
 <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> 
<script type="text/javascript">
   document.onreadystatechange=function(){
    if(document.readyState=='complete'){
                $("#mask").css("display","none")
                $(".loading").css("display","none")
            }
   }
script>
body>
html>

3.有的同学可能想要那种加载进度条的那种，来来！上代码！这种是利用文档的一个由上到下的加载顺序在中间加animate动画！看代码！


<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> 
head>
<body>
  
 
  
  <div id="mask">div>
 <img src="http://p3.so.qhmsg.com/t014d3503dd2d67d728.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"10%"},100)
 script>  
 <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>
 <img src="http://www.wyzu.cn/uploadfile/2013/1106/20131106010025493.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"60%"},100)
 script>
 <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>
 <img src="http://p0.so.qhmsg.com/t01770dfbac6bac1c4f.jpg">
 <script type="text/javascript">
   $("#mask").animate({width:"80%"},100)
 script>
 <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>
body>
html>

4.有的同学坐不住了！尼玛人家要有那种百分比数字加载那种比如显示0%到100%那种变化！好！可以可以！都上！先讲原理：一般网站中图片加载占的时间是比较多的，占网站加载时间的80%以上，那些html文件什么的太小了对于图片来说，所以我们只要统计出图片的加载时间，基本就是网站的加载时间，然后把这些时间分开，每个图片加载需要多少时间之后计算显示！来来！上代码！说半天都不知道说啥！sb楼主。。。。


<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>
  
 <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> 
<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（jquery）网页进度条加载n中办法和原理（也有css3动画进度条）

版权声明

发表评论

作者其它文章

微机控制与接口技术形成性考核册答案

手机百度浏览器如何翻译网页？

如何重置小米摄像头（如何重置小米摄像头云台版）

热门文章

随机文章

最近发表

标签列表

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

版权声明

相关阅读

发表评论

作者其它文章

微机控制与接口技术形成性考核册答案

手机百度浏览器如何翻译网页？

如何重置小米摄像头（如何重置小米摄像头云台版）

热门文章

随机文章

最近发表

标签列表