为了网络延迟加载或者为了防止提交后重复点击提交按钮,比较好的方式就是显示一个比较优雅的进度条
源码如下
<!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