jquery - 插入 Ajax 后加载页面 Jquery Mobile

Question

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

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

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 工具包浏览器在显示 ajax 加载器时出现问题，甚至除了 pageshow。

您可以使用我的代码在显示页面时隐藏 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 个装载机