ajax提交加载进度条示例代码

实现效果图

ajax提交加载进度条示例代码

 
加载图片

ajax提交加载进度条示例代码

 
实现方式:

在jsp页面中加入

样式

复制代码 代码如下:


.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}


节点

复制代码 代码如下:


<img alt="" src="https://www.jb51.net/ajax-loader.gif"/>
<div></div>


js

复制代码 代码如下:


<p> </p><p>var img = $("#progressImgage");
var mask = $("#maskOfProgressImage");</p>


复制代码 代码如下:


$.ajax({
url:url,
type:"post",
dataType:"json",
data:data,
beforeSend:function(xhr){
img.show().css({
"position": "fixed",
"top": "40%",
"left": "45%",
"margin-top": function () { return -1 * img.height() / 2; },
"margin-left": function () { return -1 * img.width() / 2; }
});
mask.show().css("opacity", "0.1");
},
success:function(result){
doSuccess()
},
complete:function(xhr){
img.hide();
mask.hide();

}
});

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wfwjzy.html