相思资源网 Design By www.200059.com
实现效果图
加载图片
实现方式:
在jsp页面中加入
样式
复制代码 代码如下:
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}
节点
复制代码 代码如下:
<img id="progressImgage" class="progress" style="display:none" alt="" src="/UploadFiles/2021-04-02/ajax-loader.gif"><div id="maskOfProgressImage" class="mask" style="display:none"></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();
}
});
加载图片
实现方式:
在jsp页面中加入
样式
复制代码 代码如下:
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F}
节点
复制代码 代码如下:
<img id="progressImgage" class="progress" style="display:none" alt="" src="/UploadFiles/2021-04-02/ajax-loader.gif"><div id="maskOfProgressImage" class="mask" style="display:none"></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();
}
});
标签:
ajax提交,加载进度条
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无ajax提交加载进度条示例代码的评论...