web前端动态添加进度条

为了网络延迟加载或者为了防止提交后重复点击提交按钮，比较好的方式就是显示一个比较优雅的进度条

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .loading{
            width: 100%;
            height: 100%;
            background: #ffffff;
            opacity: 0.5;
            left: 0;
            top:0;
            position: fixed;
            z-index: 100;
        }
        .loading .pic{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top:0;
            bottom: 0;
            right: 0;
            margin: auto;
            text-align: center;
            font-size: 20px;
            line-height: 100px;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
          document.onreadystatechange=function () {
              if ("interactive"==document.readyState){
                  var ahtml="<div class='loading'> <div class='pic'> <img src='images/loading.svg' width='80px' height='80px' ><br/><b >"+jjj+"</b></div></div>" ;
                  $("body").append(ahtml);
              }else
              if ("complete"==document.readyState){
                 $(".loading").fadeOut(100);
              }
          };
    </script>
</head>
<body>
     <div>
         <img src="images/loading_1.png">
         <img src="images/loading_2.png">
         <img src="images/loading_3.png">
     </div>
</body>
</html>

可以自己调整css样式实现多种多样的进度条样式

可以将上面的js代码封装到common.js,可以在做网络请求的时候做相应的显隐操作

/**
 * 显示进度条
 * @param msg 进度条下面显示的内容
 */
function showLoading(msg) {
    var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
    $("body").append(ahtml);
}

/**
 * 隐藏进度条
 */
function hiddleLoading() {
    $(".loading").fadeOut(100);
}

推荐一个找进度条资源的网站：https://preloaders.net/

网络请求进度条

httpUtils.js如下

/**
 * 网络请求
 * @author jiangrongtao
 * Created by on 2017-10-8.
 */
/**
 * 访问方式 get 和 post
 * @type {string}
 */
var REQUEST_POST='post';
var REQUEST_GET='get';
/**
 * 超时时间
 */
var OUT_TIME_LEVAl_1=1000;
var OUT_TIME_LEVAl_2=2000;
var OUT_TIME_LEVAl_3=3000;
/**
 *
 * @param url 请求路径
 * @param timeout 超时时间
 * @param data 提交参数
 * @param successCallBack 请求成功的回调
 * @param errorCallBcak 请求失败的回调
 * @param msg 进度条显示的信息
 * @param requestType 请求方式get post
 */
function httpAjax(url,timeout,requestType,data,successCallBack,errorCallBcak,msg){
    var isShow=false;
    //显示进度条
    if(!isShow){
        showLoading(msg);
        isShow=true;
    }
    $.ajax({
        url:url,
        timeout : timeout,
        type : requestType,
        data :data,
        dataType:'json',
        success:function(result){
            // 去掉进度条
            if(isShow){
            hiddleLoading();
                isShow=false;
            }
            console.log("success");
            successCallBack(result);
        },
        error:function (XMLHttpRequest,errorMsg,ex) {
            // 去掉进度条
            if(isShow){
                hiddleLoading();
                isShow=false;
            }
            console.log("error");
            errorCallBcak(errorMsg);
        }
    });
}

/**
 * 显示进度条
 * @param msg 进度条下面显示的内容
 */
function showLoading(msg) {
        var ahtml="<div class='loading'> <div class='pic'> <img src='image/loading.svg' width='80px' height='80px' ><br>"+msg+"</div></div>" ;
        $("body").append(ahtml);
}

/**
 * 隐藏进度条
 */
function hiddleLoading() {
        $(".loading").fadeOut(100);
}

具体的使用场景一般在onclick中

$(document).ready(function(){
          httpAjax(SELECT_USER_BY_ID,OUT_TIME_LEVAl_3,REQUEST_GET,null,
                function successCallBack(result) {
                    console.log(result);
                    initData(result.status);
                },function errorCallBcak(errorMsg){
                    var errorContent = '<p>请求服务失败，请稍后<a href="xxx.html" style="color:blue">重试</a>！</p>';
                    $("body").html(errorContent);
                },'加载中...');
        });

转载：https://blog.csdn.net/Jiang_Rong_Tao/article/details/78188148

web前端动态添加进度条

源码如下

网络请求进度条

httpUtils.js如下

具体的使用场景 一般在onclick中

猜你喜欢

具体的使用场景一般在onclick中