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