在jQuery Mobile中的Ajax调用显示页面加载微调器

我正在使用$ .ajax（）填充我的移动networking应用程序中的列表。 我想要做的是jQuery的移动加载微调框出现，而这个调用正在执行，一旦列表填充消失。 当前版本的JQM使用$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()分别显示和隐藏加载微调器。 我无法弄清楚在哪里放置这些语句来获得正确的结果。 这似乎应该是一个相当容易的事情，我只是无法find任何关于这个确切的情况。

这里是pagecreate函数中的ajax调用：

 $('#main').live('pagecreate', function(event) { $.ajax({ url: //url dataType: 'json', headers: //headers success: function(data) { for(i = 0; i < data.length; i++) { $('#courses').append('<li>' + data[i].name + '<ul id="course' + data[i].id + '"></ul>' + '<span class="ui-li-count">' + data[i].evaluatedUserIds.length + '</span></li>'); $('#course' + data[i].id).listview(); for(j = 0; j < data[i].evaluatedUserIds.length; j++) { $('#course' + data[i].id).append('<li><a href="">' + data[i].evaluatedUserIds[j] + '</a></li>'); } $('#course' + data[i].id).listview('refresh'); } $('#courses').listview('refresh'); } }); }); 

Answer 1

您可以使用beforeSend并complete $.ajax事件来调用$.mobile.showPageLoadingMsg和$.mobile.hidePageLoadingMsg 。 看起来像这样：

 $('#main').live('pagecreate', function(event) { $.ajax({ beforeSend: function() { $.mobile.showPageLoadingMsg(); }, //Show spinner complete: function() { $.mobile.hidePageLoadingMsg() }, //Hide spinner url: //url dataType: 'json', headers: //headers success: function(data) { //... } }); }); 

Answer 2

JQM 1.2之前：

 $(document).ajaxStart(function() { $.mobile.showPageLoadingMsg(); }); $(document).ajaxStop(function() { $.mobile.hidePageLoadingMsg(); }); 

由于JQM 1.2：

 $(document).ajaxStart(function() { $.mobile.loading('show'); }); $(document).ajaxStop(function() { $.mobile.loading('hide'); }); 

http://api.jquerymobile.com/page-loading/

Answer 3

有几个人问到我最终实施的解决方法，所以我想我会分享它。 这不是特别优雅或复杂，但它似乎工作。 自官方1.0发布以来，我还没有使用这个框架，所以这个更新可能已经解决了。 实质上，我把$.mobile.showPageLoadingMsg()调用放到pageshow函数中，但是把它封装在一个只在第一次显示页面时才会触发的if子句中：

 var mainloaded = false; $('#main').live('pageshow', function(event) { //Workaround to show page loading on initial page load if(!mainloaded) { $.mobile.showPageLoadingMsg(); } }); $('#main').live('pagecreate', function(event) { $.ajax({ url: //url dataType: //datatype, headers: //headers success: function(data) { // //...loading stuff // $.mobile.hidePageLoadingMsg(); mainloaded = true; } // //...handle error, etc. // }); }); 

Answer 4

这有点晚了，但你需要：

1. 在AJAX调用之前调用$.mobile.showPageLoadingMsg() 。
2. 进行AJAX调用。 该调用需要asynchronous发送 （在调用中放置async: true ）。
3. 在您的success()函数中添加$.mobile.hidePageLoadingMsg() 。

Answer 5

 $(document).ajaxSend(function() { $.mobile.loading( 'show'); }); $(document).ajaxComplete(function() { $.mobile.loading( 'hide'); }); 

Answer 6

您应该在ajax调用之前执行$ .mobile.showPageLoadingMsg（） ，并在成功（或失败）块中执行$ .mobile.hidePageLoadingMsg（） ，一旦结果返回，它就会消失。

我从来没有使用jQuery手机，但它应该像显示/隐藏一个普通的ol旋转图像一样操作。

Answer 7

或者，最简单的办法就是把它放在全球范围内，

把下面的代码放到主/布局视图中

  <script type="text/javascript"> $(document).bind('mobileinit', function () { //Loader settings $.mobile.loader.prototype.options.text = "Loading.."; $.mobile.loader.prototype.options.textVisible = true; $.mobile.loader.prototype.options.theme = "b"; $.mobile.loader.prototype.options.textonly = false; }); $(document).on({ ajaxSend: function () { $.mobile.showPageLoadingMsg(); }, ajaxStart: function () { $.mobile.showPageLoadingMsg(); }, ajaxStop: function () { $.mobile.hidePageLoadingMsg(); }, ajaxError: function () { $.mobile.hidePageLoadingMsg(); } }); </script> 

编辑：如果您的目标是最新版本的JQM（> 1.2），请使用：

• $ .mobile.loading（ '秀'）;
• $ .mobile.loading（ '隐藏'）;

Answer 8

这里的问题是$ .ajax（）的调用发生在事件处理程序（调用者）的控制stream中。

从这个控制stream中解耦ajax请求的一个非常简单的方法是让setTimeout（）为你调用这个函数，如下所示：

 setTimeout(function(){$.ajax( ... )}, 1); 

然后你可以像前面所说的那样使用$ .ajax（）的'beforeSend'和'complete'事件，可以肯定的是，你的微调器已经出现了。