Question

我在一个糟糕的互联网上强力测试我的应用程序，看看用户在我的应用程序中导航的方式，我在某些事件中显示加载程序时遇到问题。

当我将它们放在ajax调用中时，加载器可以正常处理页面内的事件：

        beforeSend: function() {
            $.mobile.loading("show");
        },
        complete: function() {
            $.mobile.loading("hide");
        },

但它们在pagecreate或pagebeforeshow等事件上效果不佳，例如：

$("#points").on("pagecreate", function() {
    $.ajax({
        type: "GET",
        url: hb_base_url + "consumer/" + user_id + "/merchants/nature/" + business_point_search + "/offset/" + offset + "/" + limit,
        crossDomain: true,
        contentType: "application/json",
        dataType: "json",
        beforeSend: function() {
            $.mobile.loading("show");
        },
        complete: function() {
            $.mobile.loading("hide");
        },
        success: function(data) {
            //do stuff
        },
        error: function(x, t, m) {
            alert(connection_lost);
            $.mobile.back();
        }
    });
});

当我导航到此页面并且我的连接挂起时，我根本没有加载，它只是挂在那里，用户感觉应用程序已崩溃。

有什么设置可以解决这个问题吗？我希望在我的所有页面更改中显示一个加载器，等待所有页面事件完成后再隐藏它。

修改我也尝试过：

$(document).on("pagebeforehide", function(){
    $.mobile.loading("show");
});


$(document).on("pageshow", function(){
    $.mobile.loading("hide");
});

但是没有成功，即使是在需要很长时间才能改变的网页上。

Answer 1

您可以使用全局回调函数（例如ajaxStart和ajaxStop）来预定义beforeSend和complete选项：

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});

$(document).ajaxComplete(function() {
    $.mobile.loading('hide');
});

在页面之间导航时始终显示加载动画？

1 个答案: