JQuery Mobile 1.3.1“$.mobile.loading”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16276753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile 1.3.1 "$.mobile.loading" not working
提问by pguimera
I have the following code:
我有以下代码：
HTML:
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:
JS：
$(document).on({
ajaxStart: function() {
$.mobile.loading('show');
console.log('getJSON starts...');
},
ajaxStop: function() {
$.mobile.loading('hide');
console.log('getJSON ends...');
}
});
I'm using Jquery Mobile 1.3.1 and testing this code in mozilla firefox and google chrome at the moment. I'm going to use it in a phonegap app later on.
我目前正在使用 Jquery Mobile 1.3.1 并在 mozilla firefox 和 google chrome 中测试此代码。稍后我将在 phonegap 应用程序中使用它。
I'm loading a JSON and displaying it on screen in a listview. While it loads, I want the program to show a "loading spinner". Console log shows that ajaxStart is firing but there is no visual spinner anywhere on the screen.
我正在加载一个 JSON 并将其显示在列表视图中的屏幕上。在加载时，我希望程序显示“加载微调器”。控制台日志显示 ajaxStart 正在触发，但屏幕上的任何地方都没有可视化微调器。
What am I doing wrong? Please Help!
我究竟做错了什么？请帮忙！
Thanks in advance.
提前致谢。
回答by Gajotres
What jQuery Mobile documentation is lacking information regarding successful execution of:
什么 jQuery Mobile 文档缺乏关于成功执行的信息：
$.mobile.loading('show');
and
和
$.mobile.loading('hide');
They will show ONLYduring the pageshowevent. In any other case you need to wrap them into the setinterval, like this:
他们将显示只有在过程中pageshow的事件。在任何其他情况下，您需要将它们包装到 中setinterval，如下所示：
In case you don't know anything about pageshowand rest of jQuery Mobile page events take a look at this ARTICLE, it is my personal blog. Or find it HERE.
如果您pageshow对 jQuery Mobile 页面事件的其他部分一无所知，请查看这篇文章，它是我的个人博客。或者在这里找到它。
First, you will not be able to show/hide AJAXloader without set interval. There's is only one situation where this is possible without and that is during the pageshowevent. In any other case setintervalis needed to kick start the loader.
首先，如果AJAX没有设置间隔，您将无法显示/隐藏加载程序。只有一种情况可以不这样做，那就是在pageshow活动期间。在任何其他情况下setinterval都需要启动加载程序。
Here's a working example: http://jsfiddle.net/Gajotres/Zr7Gf/
这是一个工作示例：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);
回答by matt burns
Wrapping it in setTimeoutworks. I just have a simple function to do it:
将其包裹在setTimeout作品中。我只有一个简单的功能来做到这一点：
function loading(showOrHide) {
setTimeout(function(){
$.mobile.loading(showOrHide);
}, 1);
}
Then just call it when you want to show or hide the spinner:
然后当你想显示或隐藏微调器时调用它：
loading('show');
or
或者
loading('hide');
Here's a silly jsfiddle: http://jsfiddle.net/7UpW5/
这是一个愚蠢的 jsfiddle：http: //jsfiddle.net/7UpW5/
回答by MannyC
Inside AJAX call? (but will work anywhere)
在 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) }
});
And the function itself:
和函数本身：
function fSpinner( strShowOrHide ) {
setTimeout( function(){
$.mobile.loading( strShowOrHide );
}, 1);
}
回答by Andreas Dietrich
the code for the other answers did not work for meand is not complete (e.g. if you like to pass parameters eventuallyor just use boolean true/falsefor toggling.
The following provides a nice way to do this:
其他答案的代码对我不起作用并且不完整（例如，如果您想最终传递参数或仅使用布尔值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);
}
use it like this:
像这样使用它：
showLoading( true ); // show loader
showLoading( false ); // hide loader
