web前端动态添加进度条

2022-01-07 工具集合

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

源码如下

进度条 - 锐客网 > *{ 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; } src="https://www.it610.com/article/js/jquery.js"> > document.onreadystatechange=function () { if ("interactive"==document.readyState){ var ahtml=" 文章图片文章图片文章图片

可以自己调整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); },'加载中...'); });

【web前端动态添加进度条】转载：https://blog.csdn.net/Jiang_Rong_Tao/article/details/78188148