Hide ajax完成事件後加載微調器

Question

我正在使用JQuery Mobile 1.4.0構建跨平臺的應用程序，並將通過phonegap進行構建。比如我有兩個頁面，一個是#homepage，另一個是

#detail頁

<div id="home" data-role="page> Home Page 
    <a href="#detail">Go Detail</a> 
</div> 
<div id="detail" data-role="page> Detail Page </div> 

jQuery Mobile的默認使用Ajax加載頁面到DOM這是很好的，我的問題是，前詳細信息頁面顯示，我需要通過ajax調用從遠程服務器獲取數據。我在文檔上註冊ajaxStart和ajaxComplete事件來顯示和顯示/隱藏微調器。

$(document).ajaxStart(function(){ 
    $.mobile.loading('show'); 
}); 
$(document).ajaxComplete(function(){ 
    $.mobile.loading('hide'); 
}); 

問題是jQuery Mobile的隱藏ajaxComplete之前加載微調轉型方法調用的，所以實際上$ .mobile.loading（「隱藏」）將被調用兩次。這並不好，因爲數據尚未填充到DOM中，因此詳細信息頁面將在插入數據後一段時間後變爲空白。

如果你不知道我在說什麼，你可以看看jQuery Mobile的源代碼，你可以看到線5070

this._triggerCssTransitionEvents(to, from, "before"); 

// TODO put this in a binding to events *outside* the widget 
this._hideLoading(); 

所以我的問題是如何真正隱藏ajaxComplete後加載微調不是在頁面轉換之後？

非常感謝您的幫助。

Answer 1

從使用complete改爲stop將會阻止加載微調器過早隱藏。

$(document).ajaxStart(function() { 
    $.mobile.loading('show'); 
}); 

$(document).ajaxStop(function() { 
    $.mobile.loading('hide'); 
});