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

网络编程 2021-07-05 10:37www.168986.cn编程入门
提交加载进度条的实现方法有很多,在本文将为大家详细介绍下,使用ajax是如何实现的,狼蚁网站SEO优化有个不错的示例,大家可以感受下
实现效果图
 
加载图片
 
实现方式:

在jsp页面中加入

样式
代码如下:

.progress{z-index: 2000}
.mask{position: fixed;: 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",
"": "40%",
"left": "45%",
"margin-": function () { return -1 img.height() / 2; },
"margin-left": function () { return -1 img.width() / 2; }
});
mask.show().css("opacity", "0.1");
},
suess:function(result){
doSuess()
},
plete:function(xhr){
img.hide();
mask.hide();

}
});

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by