Question

在jQuery Mobile中我使用的是mutli页面ajax系统。我想要做的是当用户选择一个页面时，jquery加载器出现，另一个页面只在ajax插入页面后显示。

例如，如果我有一个页面#list和另一个页面#listdetails，我希望当用户选择列表页面上的列表项时，它会加载，显示加载图形。 listdetails页面仅在页面完全加载ajax内容时显示给用户。如何做到这一点任何帮助将不胜感激。

Answer 1

可以做到，我为你做了一个例子。这不是你想要的100％，但你会明白：http://jsfiddle.net/Gajotres/AzXdT/

基本上我在我的示例中所做的是在页面即将被隐藏时显示ajax加载器：

$(document).live('pagebeforehide', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(loader);
    },1); 
});

并在加载页面时隐藏它：

$(document).live('pageshow', '[data-role="page"]',function(e,data){  
    var loader = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(loader);
    },1); 
});

setInterval就在这里，因为web kit浏览器在除了pageshow之外的任何地方都显示ajax加载器有问题。

您可以使用我的代码在显示页面时隐藏ajax加载程序，但有时您的ajax将在pageshow之后成功结束，所以请说这是您的ajax调用：

$.ajax({
    type: "POST",
    url: host,
    dataType: "xml",
    data: somedata,
    success: function(xml) {
        //Do something
        hideloader();           
    },
    error: function (request,error) {
        //Report an error
        hideloader();
    }
});

function hideloader() {
    var loader = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(loader);
    },1); 
}

在这种情况下，我使用了2个装载程序

插入Ajax后加载页面Jquery Mobile

1 个答案: