14

I have the following code:

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...');
  }    
});

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.

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!

Thanks in advance.

4

4 回答 4

50

什么 jQuery Mobile 文档缺少关于成功执行的信息：

$.mobile.loading('show');

和

$.mobile.loading('hide');

他们只会在活动期间显示pageshow。在任何其他情况下，您需要将它们包装到 中setinterval，如下所示：

pageshow如果您对 jQuery Mobile 页面事件一无所知，请查看这篇文章，这是我的个人博客。或者在这里找到它。

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);
于 2013-04-29T11:45:28.150 回答
17

将其包装在setTimeout作品中。我只有一个简单的功能来做到这一点：

function loading(showOrHide) {
    setTimeout(function(){
        $.mobile.loading(showOrHide);
    }, 1); 
}

然后在你想显示或隐藏微调器时调用它：

loading('show');

或者

loading('hide');

这是一个愚蠢的 jsfiddle：http: //jsfiddle.net/7UpW5/

于 2013-07-18T13:50:15.823 回答
2

在 AJAX 调用内部？（但可以在任何地方工作）

$.ajax({ url: ..., 
    type:'post', dataType:'json',
    data:{ d: ... }, 
    beforeSend: function() { fSpinner('show'); },
    complete: function(){ fSpinner('hide'); },
    success: function( res ){...},
    error: function(e){ alert('Error: ' + e.responseText) }
});

以及函数本身：

function fSpinner( strShowOrHide ) {
    setTimeout( function(){
        $.mobile.loading( strShowOrHide );
    }, 1); 
}
于 2015-02-14T14:47:01.500 回答
0

其他答案的代码对我不起作用并且不完整（例如，如果您想最终传递参数或仅使用布尔值true/false进行切换。以下提供了一种很好的方法：

/** workaround: $.mobile.loading not working correctly: http://stackoverflow.com/a/17725350 */
function showLoading( on, params ) {  // on: true|false
    setTimeout( function() {
      if ( on )
        $.mobile.loading( "show", params );
      else {
        //$.mobile.loading( "hide" );  // does not seem to work (e.g. using with GWT and jQM 1.4.3)
        $('.ui-loader').remove();  // removes the loader div from the body
      }       
    }, 1);
}

像这样使用它：

showLoading( true );  // show loader
showLoading( false );  // hide loader
于 2015-01-30T10:15:59.987 回答