Question

我一直在尝试使用jQuery Mobile。我正在尝试实现以下

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

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

在“列表视图”和“列表性能测试”下的jQueryMobile文档和演示中，这就像我希望的那样。

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

非常感谢任何帮助。

Answer 1

使用此函数隐藏和显示java脚本中的加载器和您自己的

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

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

Answer 2

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

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

显示负载纺车使用：

。

$ mobile.showPageLoadingMsg（）;

您使用以下方式转到下一页：

$。mobile.changePage

Answer 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>");
});

jQuery Mobile在加载之前等待下一页准备就绪

3 个答案: