JQuery Mobile在changePage期间显示加载中断

我正在使用JQM构建移动Web应用程序。 这是非常基本的，首页显示链接项目列表。 当用户单击链接时，JQM会动态注入显示项目特定详细信息的页面。 问题是，当用户点击链接时，我需要应用程序显示加载动画，而JQM通过ajax获取页面并显示它。 这是代码：

// Listen for any attempts to call changePage(). $( document ).bind( "pagebeforechange", function( e, data ) { // We only want to handle changePage() calls where the caller is // asking us to load a page by URL. if ( typeof data.toPage === "string" ) { // We are being asked to load a page by URL, but we only // want to handle URLs that request the data for a specific // item. var u = $.mobile.path.parseUrl( data.toPage ), re = /^#item_/; if ( u.hash.search(re) !== -1 ) { // Show the loading message $.mobile.showPageLoadingMsg(); // We're being asked to display the information for a specific item. // Call our internal method that builds the content for the category // on the fly based on our in-memory category data structure. showPostDetails( u, data.options ); // Make sure to tell changePage() we've handled this call so it doesn't // have to do anything. e.preventDefault(); } } }); // Load the data for a specific item, based on // the URL passed in. Generate markup for the items in the // ajax call, inject it into an embedded page, and then make // that page the current active page. function showPostDetails( urlObj, options ) { // Get the data string var IDString = urlObj.hash.replace( /.*show_id=/, "" ) // Perform ajax to get the other page details $.ajax({ type: 'POST', dataType : 'json', async: false, url: template_url + '/bin/aj_ax.php', data: 'post_id=' + IDString + '&ajax-action=get_post_details', success: function( data ) { // If we are successful // Hide loading message $.mobile.hidePageLoadingMsg(); if( data.success ) { var $page = $( '#item_' ), // Get the header for the page. $header = $page.children( ":jqmData(role=header)" ), // Get the content area element for the page. $content = $page.children( ":jqmData(role=content)" ), // Get the footer area element for the page. $footer = $page.children( ":jqmData(role=footer)" ), // The markup we are going to inject into the content // area of the page. markup = data.content; // Find the h1 element in our header and inject the data // header attribute to it. $header.find( "h1" ).html( data.header ); // Inject the markup into the content element. $content.html( markup ); // Inject the footer markup $footer.html( data.footer ); // Pages are lazily enhanced. We call page() on the page // element to make sure it is always enhanced before we // attempt to enhance the markup we just injected. // Subsequent calls to page() are ignored since a page/widget // can only be enhanced once. $page.page(); // We don't want the data-url of the page we just modified // to be the url that shows up in the browser's location field, // so set the dataUrl option to the URL for the category // we just loaded. options.dataUrl = urlObj.href; // Now call changePage() and tell it to switch to // the page we just modified. $.mobile.changePage( $page, options ); // Refresh the page elements $( "div[data-role=page]" ).page( "destroy" ).page(); } } }); } 

奇怪的是，当我在Win7上使用Firefox时，加载消息显示正常。 但是，当我使用适用于Windows和Android的谷歌浏览器时，我没有得到任何结果，Android浏览器和适用于iOS设备的Safari。 请让我知道我可能做错了什么。 谢谢！

编辑：当我试图弄清楚问题出在哪里时，我意识到加载动画在我调用$ .mobile.changePage（$ page，options）时就消失了; 那可能有什么问题吗？

Answer 1

我有完全相同的问题，因为某些原因你调用该函数时有一个延迟。 这就是我做的事情：

 $('html').addClass( "ui-loading" ); 

您可以通常的方式停止加载微调器：

 $.mobile.hidePageLoadingMsg() 

Answer 2

我有类似的问题，并通过在Ajax配置中使用beforeSend并在其中放置show加载消息来解决它。

 $.ajax({ type: 'POST', dataType : 'json', async: false, url: template_url + '/bin/aj_ax.php', data: 'post_id=' + IDString + '&ajax-action=get_post_details', beforeSend: function () { $.mobile.showPageLoadingMsg(); } success: function( data ) { $.mobile.hidePageLoadingMsg(); } 

…并尝试在$.mobile.showPageLoadingMsg()评论$.mobile.showPageLoadingMsg()