Related:
这篇文章也可以作为我博客的一部分找到HERE http://www.gajotres.net/document-onpageinit-vs-document-ready/.
Solution
首先，您需要了解 jQM 页面事件及其流程。
$(document).on('pageinit',function(){
$.mobile.loading( 'show' );
});
确实可以替代：
$(document).ready(function () {
$.mobile.loading('show');
});
但 jQM 页面由几个阶段组成。在您的情况下，为了能够显示微调器，您需要使用 pageshow 事件。页面必须显示才能显示微调器。我为您创建了一个示例：http://jsfiddle.net/Gajotres/Nncem/ http://jsfiddle.net/Gajotres/Nncem/。在其中转到下一页可以看到旋转器。您还可以将 pageshow 替换为 pageinit 以查看差异。
你应该使用这段代码：
$(document).live('pageshow', function (e, data) {
$.mobile.loading('show');
});
但即使这不是正确的方法，最好的 jQM 方法是使用以下语法：
$('div[data-role="page"]').live('pageshow', function (e, data) {
$.mobile.loading('show');
});
或者，如果您想将其绑定到单个页面，请使用以下命令：
$('#pageID').live('pageshow', function (e, data) {
$.mobile.loading('show');
});
其中 pageID 是您页面的 ID。
$(document).on('pageinit') 与 $(document).ready()
你学到的第一件事是jQuery是调用里面的代码$(文档).ready()函数，因此一旦 DOM 加载，所有内容都会执行。然而，在jQuery 移动，Ajax 用于在导航时将每个页面的内容加载到 DOM 中。因为这$(文档).ready()将在加载第一个页面之前触发，并且用于页面操作的每个代码都将在页面刷新后执行。这可能是一个非常微妙的错误。在某些系统上，它可能看起来工作正常，但在其他系统上，它可能会导致不稳定、难以重复的怪异现象发生。
经典的 jQuery 语法：
$(document).ready() {
});
解决这个问题（相信我，这是一个问题）jQuery 移动开发人员创建页面事件。简而言之，页面事件是在页面执行的特定点触发的事件。这些页面事件之一是pageinit事件，我们可以这样使用它：
$(document).on('pageinit', function(){
});
我们可以更进一步，使用页面 id 代替文档选择器。假设我们有一个带有 id 的 jQuery Mobile 页面index:
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
要执行仅适用于索引页的代码，我们可以使用以下语法：
$('#index').on('pageinit', function(){
});
Pageinit每次页面即将加载并首次显示时都会执行该事件。除非手动刷新页面或关闭ajax页面加载，否则不会再次触发。如果您希望每次访问页面时都执行代码，最好使用演出前的页面 event.
这是一个工作示例：http://jsfiddle.net/Gajotres/Q3Usv/ http://jsfiddle.net/Gajotres/Q3Usv/来演示这个问题。
关于这个问题还有一些注释。无论您使用 1 html 多页面还是多个 html 文件范例，都建议将所有自定义 javascript 页面处理分离到单个单独的 js 文件中。这将使您的代码变得更好，但您将获得更好的代码概述，尤其是在创建jQuery 移动应用。
还有一个特别的jQuery 移动事件，它被称为移动初始化.When jQuery 移动启动时，它会触发移动初始化文档对象上的事件。要覆盖默认设置，请将它们绑定到移动初始化。一个很好的例子之一移动初始化用法是关闭 ajax 页面加载，或更改默认的 ajax 加载器行为。
$(document).on("mobileinit", function(){
//apply overrides here
});
