原创转载请注明出处：http://agilestyle.iteye.com/blog/2317095
通常在系统间进行页面交互的时候，由于数据以及网络IO的原因，为了更好的用户体验，我们会对页面进行Loading的设计，比如：
GET提交
$.get("data.php", $("#firstName.val()"), function(data){
$("#getResponse").html(data); //返回的data是字符串类型
});
POST提交
$.post("data.php", $("#firstName.val()"), function(data){
$("#postResponse").html(data.name);
},"json"); //设置了获取数据的类型，所以得到的数据格式为json类型的
Ajax提交
$.ajax({
url: "ajax/ajax_selectPicType.aspx",
data: {Full:"fu"},
type: "POST",
dataType: 'json',
success: CallBack,
error: function(er){
BackErr(er);
}
});
当我们进行Ajax请求时候，我们就可以使用jQuery提供的.ajaxStart() 和 .ajaxStop() 方法加载一段Loading的CSS的就OK啦
Loading的CSS
<!DOCTYPE html>
<html>
<head>
<title>5 pulse</title>
<style type="text/css">
.sk-spinner-pulse {
width: 40px;
height: 40px;
margin: 40px auto;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out; }
@-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
@keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0); }
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0; } }
</style>
</head>
<body>
<div class="sk-spinner sk-spinner-pulse"></div>
</body>
</html>
Loading的JS
在Ajax请求开始的时候，显示Loading的CSS，在Ajax请求结束的时候，隐藏Loading的CSS
$(document).ajaxStart(function() {
$(".sk-spinner").show();
}).ajaxStop(function() {
$(".sk-spinner").hide();
});
参考资料：
http://api.jquery.com/ajaxStart/
http://api.jquery.com/ajaxStop/
http://www.jb51.net/article/43194.htm
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
相关推荐
jQuery还提供了`.ajaxStart()`和`.ajaxStop()`等事件，可以监听并处理整个页面的AJAX请求状态。 至于jQuery插件开发，该文档会介绍如何编写自定义函数、扩展jQuery对象和利用$.fn接口创建可复用的插件。这使得...
`.ajaxStart()`和`.ajaxStop()`等事件处理函数可以监听Ajax请求的状态。 **六、插件生态系统** jQuery的广泛使用催生了一个庞大的插件生态系统，涵盖图表绘制、表单验证、轮播图、弹出框等各种功能。这些插件通过...
`$.ajaxStart()`和`$.ajaxStop()`可以监听Ajax请求的开始和结束，`$.ajaxPrefilter()`和`$.ajaxTransport()`允许自定义Ajax处理逻辑。 8. **响应式设计**： 针对不同设备和屏幕尺寸，jQuery有插件如`jQuery....
`.ajaxStart()`和`.ajaxStop()`等方法可以监听Ajax请求的状态。 **jQuery 1.4.1中文手册** `jQueryAPI-100214.chm`是开发者的重要参考资料，它详细介绍了jQuery的各个API，包括函数用法、参数说明和示例，帮助...
**jQuery的`.ajaxStart()`和`.ajaxStop()`** 在进行Ajax请求时，我们可以利用`.ajaxStart()`和`.ajaxStop()`事件来显示和隐藏加载指示器，提升用户体验。当Ajax请求开始时，`.ajaxStart()`触发，请求结束时，`....
$.ajaxStart()和$.ajaxStop()等事件可以监听Ajax请求的开始和结束。 总结，jQuery 1.4.2库为开发者提供了高效、简洁的工具，无论是在页面交互、DOM操作、事件处理、动画制作还是数据交换方面，都极大地提升了开发...
`.ajaxStart()`和`.ajaxStop()`可以监听Ajax请求的开始和结束，便于全局控制。 七、插件开发与扩展 jQuery生态系统中，插件是其丰富功能的重要来源。通过`.extend()`方法，开发者可以创建自定义的jQuery对象方法，...
- **`.ajaxStart()` 和 `.ajaxStop()`**：这两个全局事件在1.3中被引入，用于在所有Ajax请求开始或结束时执行回调函数。 - **`.load()` 方法**：1.3版本中，`.load()` 方法可以接受多个参数，允许更灵活的数据过滤和...
此外，jQuery的AJAX方法还支持全局事件，如`ajaxStart`和`ajaxStop`，可以在所有AJAX请求开始和结束时触发。这对于全局的加载指示器或者错误提示非常有用。 在实际开发中，配合`myeclipse`这样的集成开发环境，可以...
- **AJAX无刷新页面**: 使用`.ajaxStart()`和`.ajaxStop()`实现页面局部刷新。 - **动画效果制作**: 结合CSS3动画，创建丰富的用户界面体验。 5. **开发工具** - **Air打开工具**: Adobe Air是一款跨平台的应用...
除了这些主要方法，jQuery还提供了一些其他与Ajax相关的辅助功能，比如`$.ajaxSetup()`用于设置全局Ajax选项，`$.ajaxStart()`和`$.ajaxStop()`分别在所有Ajax请求开始和结束时触发，以及`$.ajaxComplete()`在每个...
`.ajaxStart()`和`.ajaxStop()`等事件监听器让开发者能更好地控制Ajax请求的状态。 7. **性能优化**： jQuery 1.4版本着重提升了性能，通过减少内存占用和提高DOM操作速度，使得大型项目中的jQuery运行更顺畅。...
在jQuery中，`ajaxStart()` 和 `ajaxStop()` 是两个非常实用的方法，它们主要用于处理页面上的Ajax请求状态。这两个方法都是jQuery的全局事件处理程序，能够监控并响应页面上所有Ajax请求的状态变化。 1. `...
但有时候这个问题会非常繁琐和麻烦，要么将这个‘Loading’显示在ajax请求之前，然后在ajax成功后隐藏它，或者将它写在jquery的ajax的全局事件jQuery.ajaxStart()和jQuery.ajaxStop()中来控制整个页面的ajax状态。...
在JavaScript的世界里，jQuery库以其简洁的API和强大的功能深受开发者喜爱，特别是在处理异步请求时，`jQuery.ajax()`方法是不可或缺的一部分。本篇文章将深入探讨`jQuery.ajax()`及其相关方法在实现完整事件流中的...
$.ajaxStart( fn( ) ) $.ajaxStop( fn( ) ) $.ajaxSuccess( fn(event, XHR, options) ) Miscellaneous str.serialize( ) [obj].serializeArray( ) strjQuery.param( obj, [traditional] ) Utilities Browser and ...
当有多个AJAX请求时，可以利用$.ajaxStart()和$.ajaxStop()监听所有AJAX请求的开始和结束。例如： ```javascript $(document).ajaxStart(function() { // 显示加载动画 }); $(document).ajaxStop(function() { /...
`.ajaxStart()`和`.ajaxStop()`等方法可以监听Ajax请求的开始和结束，实现加载指示器。 ### 6. 插件生态 jQuery的插件生态系统丰富，提供了无数扩展功能，如表单验证、轮播图、模态框、日期选择器等。这些插件大大...