javascript - jquery mobile在页面更改之间停止

Question

我有一个 jQuery 移动应用程序，它是分页的，但都是一个 DOM。但是我注意到，当单击链接时，即：<a href="#page2">Page 2</a>有时需要一段时间才能加载下一页上的任何内容。更糟糕的是，jQuery mobile 保留了第一页之前的文本，并且在过渡期间，文本和元素都可以看到 - 太丑了！

我的问题是我可以使用什么事件来隐藏这些东西/在两者之间显示一个微调器，以向用户显示正在发生的事情，但他们需要耐心，同时不要让点击/点击开心。

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

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

有任何想法吗？

Answer 1

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

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

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