我正在使用 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 之后而不是页面转换之后真正隐藏加载微调器?
非常感谢您的帮助。
最佳答案
从使用complete
更改为stop
,这将阻止加载旋转器过早隐藏。
$(document).ajaxStart(function() {
$.mobile.loading('show');
});
$(document).ajaxStop(function() {
$.mobile.loading('hide');
});
关于jquery - ajax 完成事件后隐藏加载微调器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20683850/