jquery - 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 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');
});