jQuery Mobile 等到下一页准备好后再加载答案

【问题标题】：jQuery Mobile Wait until next page is ready before loadingjQuery Mobile 等到下一页准备好后再加载
【发布时间】：2011-03-24 14:34:38
【问题描述】：

我一直在尝试使用 jQuery Mobile。我正在尝试执行以下操作

当用户点击底部的事件导航栏时，他们将继续查看事件列表。
此列表是通过来自服务器的 AJAX 请求生成的。
当前页面加载，无论列表是否可用，然后在完成加载后随后显示信息。不整洁！！

我想显示 jquery 移动加载弹出窗口，直到页面准备好然后继续。

在“列表视图”和“列表性能测试”下的 jQueryMobile Docs and Demos 中，这就像我希望的那样。

我尝试绑定到 'pagebeforeshow' 事件，但无济于事。

任何帮助将不胜感激。

【问题讨论】：

我也对这个答案感兴趣。不过，我应该注意，在您正在谈论的 jQuery Mobile 文档和演示中，他们没有使用 AJAX 在列表性能测试下生成该列表。该列表已在 HTML 中指定。
这很有趣，我在 jQuery 论坛上发布了同样的问题，并被告知使用 $.mobilePageChange() 但是目前它不起作用，但我将尝试将其绑定到选项卡单击事件和 preventDefault() 然后尝试在加载后更改页面。我会告诉你我的进展情况。
酷，祝你好运，如果你发布你的解决方案，我会很高兴的！

标签： jquery jquery-mobile

【解决方案1】：

使用这个函数在java脚本中隐藏和显示loader和你自己的

 //show loader
var showLoader = function () {   
        $('.ui-loader').css('display', 'block');
   }

 //hide loader
var hideLoader = function () {
            $('.ui-loader').css('display', 'none');
   }

【讨论】：

与常规论坛不同，绝对没有必要在每篇帖子的末尾添加诸如请投票给答案之类的标语。如果你的答案被阅读它的人认为是好的，他们会支持它。

【解决方案2】：

尝试在您提到的 GUI 项目 - 导航栏上放置一个点击处理程序。

在该函数中进行 ajax 调用，并在设置项目后在 ajax 调用的成功函数中显示下一页。

显示负载纺车使用：

$.mobile.showPageLoadingMsg();

您使用以下命令移至下一页：

$.mobile.changePage

【讨论】：

【解决方案3】：

我在加载页面时也遇到了同样的问题。我用下面的代码来消除

$(document).on("pagebeforeshow","#page",function(){ 
$("#header").empty();
$("#content").empty();
$("#footer").empty();
});

$(document).on("pageshow","#page",function()
{
$("#header").append("<h2 align='center'>"+'Header'+"</h2>");
$("#content").append("<h2 align='center'>"+'Content'+"</h2>");
$("#footer").append("<h2 align='center'>"+'Footer'+"</h2>");
});

【讨论】：

它首先显示空白页面。但我希望它比不整洁的页面视图更好