ajax提交加载进度条示例代码
2013-10-14 00:00
766 查看
实现效果图
加载图片
实现方式:
在jsp页面中加入
样式
节点
js
加载图片
实现方式:
在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(); } });
相关文章推荐
- ajax提交加载进度条示例代码
- ajax提交加载进度条示例代码
- ajax提交整个from表单示例代码
- Android进步之路一:显示“正在加载,请稍候.......”进度对话框示例代码以及具体细节讲解
- 异步(ajax)动态加载无限级联树(tree)代码示例
- ajax提交整个from表单示例代码
- json格式的Ajax提交示例代码
- aJax 表单提交代码示例
- json格式的Ajax提交示例代码
- PHP+AjaxForm异步带进度条上传文件实例代码
- 调用prototype.js的ajax进行post提交示例源码
- Windows Phone Mango开发实践——示例代码更新和提交(2013.09.12)
- Android 中CheckBox多项选择当前的position信息提交的示例代码
- 微信小程序实现图片懒加载的示例代码
- Js和Jquery中ajax返回JSON格式的两种方法!(各有示例代码)
- Jquery EasyUI中弹出确认对话框以及加载效果示例代码
- 关于回车键提交的示例代码
- jQuery中使用Ajax获取JSON格式数据示例代码
- 一个简单的ajax上传进度显示示例
- php socket 提交表单示例代码