jQuery Mobile - $.mobile.showPageLoadingMsg()；doens未显示

Question

我试图在$.mobile.loading请求之前在HTML (jQuery Mobile)中使用AJAX，但是它不起作用(当用户进入这个页面时它没有显示出来)。

这是我的源代码：

$(document).on('pagecreate', '#page_products', function(e){ 

    //Shows Loading Popup
    $.mobile.loading("show",{text: "Loading...", textVisible: true });

    $.ajax({
        url: URL,
        type: "GET",
        dataType: "JSONP",
        async: true,
        success: function(json, status){

            //source code for success response
            //[...]

                    //hide loading popup
            $.mobile.loading('hide');

            return true;
        },
        contentType: "text/xml; charset=\"utf-8\""
    });
});

备注：

1. 如果我将$.mobile.loading放在ajax成功响应中，就会显示出来！
2. 我也尝试过了，但问题是一样的。

知道问题或其他解决方案是什么吗？

提前谢谢。

Answer 1

在ajaxstart和ajaxstop上使用这些通用加载器：

// generic loader icon for ajax start
$(document).ajaxStart(function () { 

    $(".ui-loader").css("display", "block"); 
    $.mobile.loading("show",{text: "Loading...", textVisible: true }); 
}); 

// generic loader icon for ajax stop
$(document).ajaxStop(function () {     
    $(".ui-loader").css("display", "none");
    $.mobile.loading('hide');   
});

Answer 2

您试图在$.mobile.loading("show",...);事件期间触发pagecreate，该事件将无法工作。它不是jQuery移动的文档，但这只有在pageshow事件处理过程中才有可能。

除了在pageshow阶段，您需要以异步方式调用加载程序小部件的hide和show。

尝试使用这样的setTimeout包装器：

window.setTimeout(function(){
  $.mobile.loading('show');
}, 1);

有关其他信息，请查看http://goo.gl/blTsZ