JQuery Mobile 1.3.1“$。mobile.loading”不工作 [英] JQuery Mobile 1.3.1 "$.mobile.loading" not working

问题描述

我有以下代码：

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应用程序中使用它。

I'm using Jquery Mobile 1.3.1 and testing this code in mozilla firefox and google chrome at the moment. I'm going to use it in a phonegap app later on.

我正在加载一个JSON并在列表视图中在屏幕上显示它。当它加载时，我想程序显示一个加载旋转器。控制台日志显示ajaxStart正在触发，但屏幕上的任何位置没有可视化的微调框。

I'm loading a JSON and displaying it on screen in a listview. While it loads, I want the program to show a "loading spinner". Console log shows that ajaxStart is firing but there is no visual spinner anywhere on the screen.

我做错了什么？请帮助！

What am I doing wrong? Please Help!

提前感谢。

推荐答案

文档缺少有关成功执行的信息：

What jQuery Mobile documentation is lacking information regarding successful execution of:

$.mobile.loading('show');

和

$.mobile.loading('hide');

他们将在 pageshow 事件。在任何其他情况下，您需要将它们包装到 setinterval ，如下所示：

They will show ONLY during the pageshow event. In any other case you need to wrap them into the setinterval, like this:

如果您对 pageshow 不知道任何内容，jQuery Mobile页面事件的其余部分则会查看此 ARTICLE ，这是我的个人博客。或者 这里 。

In case you don't know anything about pageshow and rest of jQuery Mobile page events take a look at this ARTICLE, it is my personal blog. Or find it HERE.

首先，您将无法在没有设置间隔的情况下显示/隐藏 AJAX 加载程序。只有一种情况，这是可能的，而不是在 pageshow 事件。在任何其他情况下，需要 setinterval 才能启动加载程序。

First, you will not be able to show/hide AJAX loader without set interval. There's is only one situation where this is possible without and that is during the pageshow event. In any other case setinterval is needed to kick start the loader.

工作示例： 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);      

这篇关于JQuery Mobile 1.3.1“$。mobile.loading”不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！