JQuery Mobile 1.3.1“$.mobile.loading”不工作

Posted 2023-05-07

【中文标题】JQuery Mobile 1.3.1“$.mobile.loading”不工作

【英文标题】：JQuery Mobile 1.3.1 "$.mobile.loading" not working

【发布时间】：2013-04-23 00:10:48

【问题描述】：

我有以下代码：

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 并在列表视图的屏幕上显示它。加载时，我希望程序显示“加载微调器”。控制台日志显示 ajaxStart 正在触发，但屏幕上的任何地方都没有可视微调器。

我做错了什么？请帮忙！

提前致谢。

【参考方案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);      

【讨论】：

非常感谢，我看不到提供的示例工作，但我在您的帮助下完成了我的工作！

@Gajotres - 愿 SO 领主授予您最高的声誉：P

这个答案是救命稻草！

【参考方案2】：

将其包装在 setTimeout 中有效。我只有一个简单的功能：

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

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

loading('show');

或

loading('hide');

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

【讨论】：

可以。从“beforeSend: func ...”调用它。另外，添加“async: false”参数。

【参考方案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); 

【参考方案4】：

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

/** workaround: $.mobile.loading not working correctly: http://***.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