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

目前，我正在使用jQueryMobile1.3.1，并在和google中测试这段代码。稍后我将在phonegap应用程序中使用它。

我正在加载一个JSON，并将它显示在一个listview中。当它加载时，我希望程序显示一个“加载旋转器”。控制台日志显示ajaxStart正在触发，但屏幕上任何地方都没有视觉旋转器。

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

提前谢谢。

Answer 1

jQuery移动文档缺乏关于成功执行以下内容的信息：

$.mobile.loading('show');

和

$.mobile.loading('hide');

在pageshow事件期间，它们将只显示的。在任何其他情况下，您都需要像这样将它们包装到setinterval，中：

如果您对pageshow和其他jQuery移动页面事件一无所知，请看一下这个各条，这是我的个人博客。或者找到它这里。

首先，您将无法在没有设置间隔的情况下显示/隐藏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');

下面是一个愚蠢的小把戏：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); 
}