Question

经过很多谷歌和阅读论坛后，我找不到合适的答案。

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

显示加载消息
致电更改页面
隐藏加载消息

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

这会让我成为像下面这样的中间人：

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

无论如何将它绑定到更改页面事件？所以它从第二个changePage显示，但是一旦changePage离开就隐藏......

我知道上面的中间人方法会起作用但是想要更加整洁和更好的实现，因为有很多html / js文件。

由于

Answer 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时禁用它。如果您想了解有关页面加载顺序的更多信息，请查看以下链接：https://stackoverflow.com/a/14010308/1848600。在那里你会发现很多关于jQM页面动态的信息。

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

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

每次成功加载和显示不同的页面时，这将隐藏ajax加载程序（如果它已打开）。

Answer 2

对许多人来说，这可能太过分了，但我找到的解决方案与this question的评论中所写的解决方案不同。

我使用jquery mobile router并在＆＃39; show＆＃39;一个页面的事件，我做$.mobile.loading("show");，所以当页面出现时，它与加载微调器显示。

我使用Jquery Mobile Router做了很多，但它解决了这个问题。

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

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

我正在使用JQM 1.4.2 ......

jQuery Mobile Binding Spinner到ChangePage

2 个答案: