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正在触发，但屏幕上的任何位置都没有可视化微调器。
我究竟做错了什么？ 请帮忙！
提前致谢。
什么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);
在setTimeout包装它的工作原理。 我只是有一个简单的function：
function loading(showOrHide) { setTimeout(function(){ $.mobile.loading(showOrHide); }, 1); }
然后在想要显示或隐藏微调器时调用它：
loading('show');
要么
loading('hide');
这是一个愚蠢的jsfiddle： http ： //jsfiddle.net/7UpW5/
在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); }
其他答案的代码对我不起作用并且不完整（例如，如果你想最终传递参数或者只是使用布尔值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