jquery移动在页面更改之间停止

Question

我有一个jQuery移动应用程序，它是分页但所有DOM。但是我注意到点击一个链接，即：<a href="#page2">Page 2</a>，有时需要一段时间来加载下一页上的内容。更糟糕的是，jQuery mobile保留了以前的文本，从第一页开始，在转换期间，文本和元素都可以看到 - 太丑了！

我的问题是我可以用什么事件来隐藏这些东西/在它们之间显示一个微调器以向用户显示正在发生的事情，但是他们需要耐心而在此期间不要轻拍/点击快乐。

理想情况下，我想要2个活动。一开始，一站。因此：

1. event1启动，我隐藏第1页并显示微调器
2. 旋转器继续旋转并正在完成工作（加载谷歌地图等）
3. event2触发，页面完成加载。我展示了第2页并停止了微调。

有什么想法吗？

Answer 1

您可以使用在加载新页面之前触发的文档事件“pagebeforechange”，用于触发事件1，以及用于事件2的页面事件“pageshow”

$(document).on( "pagebeforechange", function( e, data ) {
    showSpinner();
});

$("div[data-role]='page'").on("pageshow",function(event,data) {  
    hideSpinner();
});