在ajax完成事件后隐藏加载微调器

Question

我正在使用JQuery Mobile 1.4.0构建跨平台应用程序，并将通过phonegap构建。例如，我有两个页面，一个是#homepage，另一个是#detail page

<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（'hide'）将被调用两次。这并不好，因为数据尚未填充到DOM中，因此在插入一段时间数据后，详细信息页面将为空白。

如果你不知道我在说什么，你可以查看jquery移动源代码，你可以看到第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');
});