加载页面后插入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 kit浏览器有一个问题，显示ajax加载器在任何甚至除了pageshow。

你可以使用我的代码在页面显示时隐藏ajax加载器但有时你的ajax会在页面显示后成功结束所以假设这是你的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个加载器