jQuery Mobile的1.3.1“$ .mobile.loading”不工作(JQuery M

我有以下代码：

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移动1.3.1和此刻的测试在Mozilla Firefox和谷歌Chrome的代码。 我将在PhoneGap的应用程序以后使用它。

我加载一个JSON和列表视图在屏幕上显示它。 虽然它加载，我希望程序显示“加载微调”。 控制台日志显示ajaxStart被解雇，但没有视觉旋转屏幕上的任何地方。

我究竟做错了什么？ 请帮忙！

提前致谢。

Answer 1:

什么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);      

Answer 2:

在其包装setTimeout作品。 我只是有一个简单的函数来做到这一点：

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

然后，只需调用它，当你想显示或隐藏的微调：

loading('show');

要么

loading('hide');

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

Answer 3:

里面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); 
}

Answer 4:

对于其他答案的代码，如果你想最终传递参数或者只是使用布尔 并没有为我工作 ，是不完整的（例如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

文章来源: JQuery Mobile 1.3.1 “$.mobile.loading” not working