0

我试图在 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\""
    });
});

笔记：

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

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

提前致谢。

4

2 回答 2

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');   
});
于 2013-10-04T04:35:37.607 回答
0

您试图在活动$.mobile.loading("show",...);期间触发pagecreate，但这是行不通的。它不是 jQuery Mobile 的文档，但这仅在pageshow事件处理期间才有可能。

除了在pageshow阶段之外，您需要以异步方式调用加载hide器show小部件。

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

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

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

于 2013-12-31T07:05:34.437 回答