为我的 jQuery Mobile 首页获取内容的最快方法是什么？答案

【问题标题】：What's the fastest way to fetch content for my jQuery Mobile front page?为我的 jQuery Mobile 首页获取内容的最快方法是什么？
【发布时间】：2012-10-29 04:59:33
【问题描述】：

我正在使用tabletop 将我的 jQuery Mobile 应用程序的文本/内容存储在 Google Doc 中，因此当有人访问我的应用程序时，它应该做的第一件事就是获取内容（JSONP 请求）。

假设 jQuery Mobile 在 JSONP 请求完成之前加载/渲染（不一定是这种情况），它应该显示一个加载指示器，直到请求完成，然后请求回调将渲染数据，它需要触发重新渲染以增强 <ul> 元素等内容。

如何才能使时间与 jQuery Mobile 加载/渲染一致？

我正在考虑在<head>（不在事件内）中执行 JSONP 请求，并在完成时将数据呈现到内容 <div>，但我需要触发重新呈现，如果我在渲染 jQuery Mobile 之前触发它，它会中断，等等。

如果这没有意义，这里有一个更相关的示例：假设您希望您的首页显示特定帐户的最新推文。当您加载页面时，它会获取推文。您如何计时，以便在提取完成后可以正确呈现？

【问题讨论】：

为什么不把“重新渲染”放到 JSONP 请求的回调中？
@G_M 因为如果在页面呈现之前触发回调怎么办？第一次创建页面前不能调用 .trigger("create") 否则会报错。

标签： jquery jquery-mobile jsonp

【解决方案1】：

您可以绑定到pageinit 事件来发出您的AJAX 请求。这确保了 jQuery Mobile 伪页面将在 AJAX 请求返回时被初始化。这很好，因为您知道动态添加的代码的状态，它没有被初始化。

例如：

$(document).on('pageinit', '#myLandingPage', function () {
    $.ajax({
        ...,
        success : function (response) {
            //do your work on the response

            //then when you add the HTML output to the DOM just initialize it
            $("#some-container").html(htmlOutput).trigger("create");
        }
    });
});

我建议您使用服务器端语言执行初始 JSONP 请求，因为您的服务器很可能具有非常好的带宽，而您的用户可能没有（尤其是如果他们在移动设备上）。

【讨论】：

这会起作用，但我会失去文档加载和调用 pageinit 事件之间的时间。这不是什么大不了的事，但如果我能尽快开始我的 HTTP 请求就好了。
@TobiasFünke 您可以更新 AJAX 请求的回调函数，以首先检查页面的状态，无论它是否已初始化，然后初始化或更新它。 jQuery Mobile 在初始化时为许多元素添加类，因此您可以通过检查这些类之一来检查页面是否已初始化，例如：if ($("#my-page-div").hasClass("ui-page")) {/*already initialized*/} else {/*not initialized yet*/}。虽然我不确定你多久可以显示加载微调器。
感谢 Jasper，这正是我所做的，它正在工作。我是在事件之外进行的，所以它会立即加载，我将 ui-loading 类添加到 <body> 并在完成后将其删除