当前位置：主页 > 查看内容

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

发布时间：2021-07-10 00:00| 有 位朋友查看

简介：实现效果图 加载图片 实现方式: 在jsp页面中加入 样式 复制代码 代码如下: .progress{z-index: 2000} .mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F} 节点 复制代码 代码如下: img id="progressImgag……
实现效果图
 
加载图片
 
实现方式:

在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="/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();

}
});

原文链接：https://m.jb51.net/article/42094.htm
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：c# 正则表达式对网页进行有效内容抽取 下一篇：ajax jquery校验用户是否已经注册演示代码

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐