Question

我正在尝试在AJAX请求之前在HTML页面（jQuery Mobile）中使用 $ .mobile.loading ，但它不起作用（当用户进入此页面时未显示）。

这是我的源代码：

$(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\""
    });
});

备注：

如果我在ajax成功回复中加入 $。mobile.loading ，就会显示出来！
我也尝试过pagebeforeshow，问题是一样的。

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

提前致谢。

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 Mobile的文档，但这只能在pageshow事件处理期间实现。

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

尝试使用这样的setTimeout包装：

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

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

jQuery Mobile - $ .mobile.showPageLoadingMsg（）;没有表现出来

2 个答案: