javascript - JQuery Mobile 1.3.1 "$.mobile.loading"不工作

Question

我有以下代码:

HTML:

<link rel="stylesheet" href="js/jquery.mobile-1.3.1.min.css"/>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>

JS:

$(document).on({
  ajaxStart: function() { 
    $.mobile.loading('show');
    console.log('getJSON starts...');
  },
  ajaxStop: function() {
    $.mobile.loading('hide');
    console.log('getJSON ends...');
  }    
});

我目前正在使用 Jquery Mobile 1.3.1 并在 mozilla firefox 和 google chrome 中测试这段代码。稍后我将在 phonegap 应用程序中使用它。

我正在加载一个 JSON 并将其显示在屏幕上的 ListView 中。加载时，我希望程序显示“加载微调器”。控制台日志显示 ajaxStart 正在触发，但屏幕上的任何位置都没有可视微调器。

我做错了什么？请帮忙!

提前致谢。

Answer 1

哪些 jQuery Mobile 文档缺少有关成功执行的信息:

$.mobile.loading('show');

和

$.mobile.loading('hide');

它们将在 pageshow 事件期间显示ONLY。在任何其他情况下，您需要将它们包装到 setinterval 中，如下所示:

如果您对 pageshow 和其他 jQuery Mobile 页面事件一无所知，请查看此 ARTICLE ，这是我的个人博客。或者找 HERE .

首先，如果没有设置间隔，您将无法显示/隐藏 AJAX 加载程序。只有一种情况可以不这样做，那就是在 pageshow 事件期间。在任何其他情况下，都需要 setinterval 来启动加载程序。

这是一个工作示例:http://jsfiddle.net/Gajotres/Zr7Gf/

    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    

    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);