jQuery插件在等待AJAX​​响应时显示“正在加载”

Question

我写了一些jQuery ajax代码，当下拉选项发生更改时，我向服务器发送请求。基于这种改变，4或5个文本字段改变他们的数据，并且加载一堆新图像。一切都很美妙。

但我想知道是否有一个由jQuery提供的插件可以让页面变暗...在请求从服务器返回之前，快速显示'加载'或微调器？我记得看到一个，但我无法找到它。

Answer 1

您可以将两个对象传递给泛型ajax对象ajaxStart和ajaxStop。这些是事件处理程序，只要发送和接收到ajax查询就会触发。如果一个Ajax请求启动

ajaxStart（全球事件）
广播该事件并没有其他Ajax请求正在运行。

ajaxStop（全球事件）
如果有正在处理中没有更多的Ajax请求触发这个全球盛会。

考虑到这一点，这也很容易设置你以后：

$("#loading").bind("ajaxStart", function(){ 
    $(this).show(); 
}).bind("ajaxStop", function(){ 
    $(this).hide(); 
}); 

只是让你#loading DIV任何你喜欢的 - 看看众多的收藏夹插件或BlockUI到实现你所问的东西。

当然，你可以设置它做你喜欢的任何事情，但是一旦它被设置在脚本的顶部，它就会被设置和忘记。

如果您使用的是BlockUI插件，那么所有你需要做的是这样的：

$().ajaxStart($.blockUI).ajaxStop($.unblockUI); 

Answer 2

我会建议使用jQuery的Ajax事件方法ajaxStart（）和ajaxComplete（）

Documentation here under Ajax Events