我有以下代码:
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中测试此代码。我稍后会在手机应用程序中使用它。
我正在加载JSON并在列表视图中将其显示在屏幕上。加载时,我希望程序显示“加载微调器”。控制台日志显示ajaxStart正在触发,但屏幕上的任何位置都没有可视化微调器。
我做错了什么?请帮助!
提前致谢。
答案 0 :(得分:50)
哪些jQuery Mobile文档缺少有关成功执行的信息:
$.mobile.loading('show');
和
$.mobile.loading('hide');
他们将在 pageshow
事件期间显示仅。在任何其他情况下,您需要将它们包装到 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);
答案 1 :(得分:17)
将其包含在setTimeout
中。我只是有一个简单的功能:
function loading(showOrHide) {
setTimeout(function(){
$.mobile.loading(showOrHide);
}, 1);
}
然后在想要显示或隐藏微调器时调用它:
loading('show');
或
loading('hide');
这是一个愚蠢的jsfiddle:http://jsfiddle.net/7UpW5/
答案 2 :(得分:2)
内部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);
}
答案 3 :(得分:0)
其他答案的代码对我不起作用并且不完整(例如,如果你想最终传递参数或只需使用boolean {{ 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 (e.g. using with GWT and jQM 1.4.3)
$('.ui-loader').remove(); // removes the loader div from the body
}
}, 1);
}