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 用の Google Chrome、デフォルトの Android ブラウザ、および iOS デバイス用の Safari を使用すると、何も得られません。私が間違っている可能性があることを教えてください。ありがとうございました！
編集: 問題がどこにあるのかを突き止めようとしたとき、 $.mobile.changePage( $page, options ); を呼び出すと、読み込み中のアニメーションが消えることに気付きました。そこに何か問題があるのでしょうか？