如何在 changePage 期间停止 jQuery Mobile 调用 $.mobile.loading('hide')？答案

【问题标题】：How to stop jQuery Mobile calling $.mobile.loading('hide') during changePage?如何在 changePage 期间停止 jQuery Mobile 调用 $.mobile.loading('hide')？
【发布时间】：2013-08-23 14:35:55
【问题描述】：

我试图阻止 jQuery Mobile 在调用 changePage 时隐藏加载微调器。

程序流程是这样的，从点击一个链接开始，它的点击事件定义如下：

$('body').delegate('.library-link', 'click',  function() {
    $.mobile.loading( 'show' );
    $.mobile.changePage($('#page-library'));
    return false;
});

点击链接后，pagebeforeshow 事件被触发，这会触发一个函数从本地存储中填充页面，或者进行 ajax 调用以获取数据。

$(document).on('pagebeforeshow', '#page-library', function(event){
   ui.populate_data(); 
});

在ui.populate_data() 中，我们从本地存储中获取数据或进行 ajax 调用。

ui.populate_data = function() {
    if (localdata) {
        // populate some ui on the page
        $.mobile.loading( 'hide' );
    } else {
        // make an ajax call
    }
};

如果数据在那里，我们将数据加载到容器中并隐藏加载微调器。如果不是，它会进行 ajax 调用，这会在完成时将数据保存在本地存储中，并调用 ui.populate_data()

问题是，在pagebeforeshow 事件完成后，changePage 正在调用$.mobile.loading( 'hide' )，即使数据可能还没有。除了临时重新定义$.mobile.loading之外，我找不到任何方法来阻止changePage隐藏微调器，这感觉很不对：

$('body').delegate('.library-link', 'click',  function() {
    $.mobile.loading( 'show' );
    loading_fn = $.mobile.loading;
    $.mobile.loading = function() { return; };
    $.mobile.changePage($('#page-library'), {showLoadMsg: false});
    return false;
});

在我的 ui 函数中隐藏微调器之前：

ui.populate_data = function() {
    if (localdata) {
        // populate some ui on the page
        if (typeof loading_fn === 'function') {
            $.mobile.loading = loading_fn;
        }
        $.mobile.loading( 'hide' );
    } else {
        // make an ajax call
    }
};

肯定有一种方法可以完全控制加载小部件的显示和隐藏，但我找不到。我尝试将{showLoadMsg: false} 传递给changePage，但正如文档所建议的那样，它仅在通过ajax 加载页面时才起作用，而我没有这样做。

【问题讨论】：

您要完全关闭它吗？
我需要能够手动显示和隐藏它，但我可以在任何地方手动进行操作
试试$('.ui-loader').hide(); 和.show()。你用的是什么版本的jq和jqm？
@Omar 成功了。我曾假设 $.mobile.loading('hide') 会调用 $('.ui-loader').hide() 但不知何故它没有。我不明白，但无论如何，如果你想把它作为答案，我会接受的。如果你能解释它为什么起作用，那就更好了！我正在使用 jQ 1.9.1 和 jQM 1.3.2
嗯，这两个函数以某种方式完成了相同的工作。但是，当使用.loading() 时，它会将.ui-loading 添加到<html> 并将.ui-loader display 属性更改为block。很奇怪，不是吗？

标签： jquery-mobile

【解决方案1】：

也许对很多人来说太多了，但我找到了不同于 cmets 中所写的解决方案（这对我不起作用）。

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

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

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

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

我正在使用 JQM 1.4.2...

【讨论】：