jQuery Mobile的1.3.1 “$ .mobile.loading” 不工作

我有以下代码：

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

我在做什么错？请帮忙！

在此先感谢。

来源

2013-04-29 pguimera

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);

来源

2013-04-29 11:45:28 Gajotres

非常感谢，我无法看到提供的示例工作，但我做了我的你的工作有所帮助！ – pguimera 2013-04-30 09:34:43

'pagebeforeshow'事件也是如此。 – styke 2013-05-02 14:50:40

太棒了！谢谢！ – 2013-07-13 10:30:44

在setTimeout作品结束语。我只是有一个简单的函数来做到这一点：

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

然后只是把它当你要显示或隐藏微调：

loading('show');

或

loading('hide');

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

来源

2013-07-18 13:50:15

似乎没有工作，如果async：false ... – 2014-03-25 13:12:36

做。从“beforeSend：func ...”中调用它。另外，添加“async：false”参数。 – MannyC 2015-07-06 15:30:55

代码为其他答案没有工作me并且不完整（例如，如果您喜欢最终传递参数或只需使用布尔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); 
}

这样使用它：

showLoading(true); // show loader 
showLoading(false); // hide loader

来源

2015-01-30 10:15:59

里面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); 
}

来源

2015-02-14 14:47:01 MannyC

jQuery Mobile的1.3.1 “$ .mobile.loading” 不工作

回答

相关问题