jQuery Mobile 绑定 Spinner 到 ChangePage答案

【问题标题】：jQuery Mobile Binding Spinner To ChangePagejQuery Mobile 绑定 Spinner 到 ChangePage
【发布时间】：2013-01-04 10:08:49
【问题描述】：

经过大量的谷歌搜索和阅读论坛后，我没有找到合适的答案。

到目前为止，我发现的内容如下：

显示加载消息
呼叫变更页面
隐藏加载消息

这可行，但每次调用加载/更改页面时我都必须这样做（很多）。

这会让我做一个如下的中间人功能：

function customLoader(url){
    showLoader();
    $.mobile.changePage(url);
    hideLoader();
}

是否有将其绑定到更改页面事件？这样它就显示从第二个 changePage 被调用，但一旦 changePage 离开就隐藏......

我知道上面的中间人方法会起作用，但由于有很多 html/js 文件，我希望实现更整洁、更好的方法。

【问题讨论】：

标签： javascript jquery jquery-mobile binding jquery-events

【解决方案1】：

类似这样的：

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $.mobile.showPageLoadingMsg(true);
        setTimeout(function () {
            $.mobile.changePage('#second');
        }, 1000);
    });    
});

$("#second").live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

超时只是为了让您可以看到它正在成功运行。这是一个轻量级的示例，因此过渡会快速触发。在你的真实代码中删除它。

这是一个例子：http://jsfiddle.net/Gajotres/arrHd/

当页面 A 转换到页面 B 时，每个更改页面事件周期都有一个发生的事件顺序。无论使用哪个操作来触发更改页面，您始终可以在页面 B i 成功加载时禁用它。如果您想了解有关页面加载顺序的更多信息，请查看此链接：https://stackoverflow.com/a/14010308/1848600。在那里你会发现很多关于 jQM 页面动态的内容。

如果您想在每个页面转换中实现此功能，请使用：

$('[data-role="page"]').live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

这将在每次成功加载和显示不同的页面时隐藏一个 ajax 加载器（如果它是打开的）。

【讨论】：

【解决方案2】：

也许对很多人来说太多了，但我找到了一个与this question 的 cmets 中写的不同的解决方案。

我使用jquery mobile router，在页面的“显示”事件中，我使用$.mobile.loading("show");，所以当页面出现时，它会显示加载微调器。

我经常使用 Jquery Mobile Router，但它解决了这个问题。

虽然要隐藏微调器，但我不得不使用$('.ui-loader').hide();，这很奇怪，我知道...

（也许只听正确的事件并触发微调器也可以，因为这就是 JQMR 所做的......）

我正在使用 JQM 1.4.2...

【讨论】：