jQuery Mobile在changePage期间显示加载中断 [英] JQuery Mobile show loading breaks during changePage

问题描述

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

I am building a Mobile Web Application with JQM. It's pretty basic, the front page displays a list of linked items. When a user clicks a link, JQM Dynamically Injects the page showing item specific details. The problem is, when the user clicks a link, i need the app to display the loading animation while JQM fetches the page via ajax and displays it. This is the code:

// 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，在iOS设备上使用默认的Android浏览器和Safari时，却一无所获. 请让我知道我可能做错了.谢谢！

The strange thing is, the loading message displays just fine when i use Firefox on Win7. However, i get nothing when i use Google Chrome for Windows and Android, the defailt Android Browser and Safari for the iOS devices. Please let me know what i could be doing wrong. Thank you!

当我试图找出问题所在时，我意识到当我调用$ .mobile.changePage($ page，options)时，加载动画消失了.那里有什么问题吗?

When i tried to figure out where the problem was, i realized the Loading Animation disappears right when i call $.mobile.changePage( $page, options ); Could there be anything wrong there?

推荐答案

我遇到了完全相同的问题，由于某种原因，调用该函数时会出现延迟.这是我为解决此问题所做的事情:

I had the exact same problem, for some reason there is a delay when you call the function. This is what I did to get around it:

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

您可以按照通常的方式停止加载微调器:

You can stop the loading spinner in the usual way:

$.mobile.hidePageLoadingMsg()

这篇关于jQuery Mobile在changePage期间显示加载中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！