JQuery Mobile 1.3.1“$ .mobile.loading”无效

我有以下代码：

HTML：

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正在触发，但屏幕上的任何位置都没有可视化微调器。

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

提前致谢。

Answer 1

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

 $.mobile.loading('show'); 

和

 $.mobile.loading('hide'); 

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

如果您对pageshow和jQuery Mobile页面事件的其余部分pageshow ，请查看此文章 ，这是我的个人博客。 或者在这里找到它。

首先，如果没有设置间隔，您将无法显示/隐藏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：

 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本身：

 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 (eg 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