web前端动态添加进度条

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

源码如下


<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="

"+jjj+"
"
; $("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="

"+msg+"
"
; $("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="

"+msg+"
"
; $("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 = '

请求服务失败,请稍后重试

'
; $("body").html(errorContent); },'加载中...'); });

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

你可能感兴趣的:(工具集合)