Question

When I press a link in my jQuery Mobile app, jqm (being an amazing library) automatically displays a nice little swirling image that signifies “Loading” for the briefest moment before bringing me to that page.

However, the back button on my various pages does not have that functionality built in. How can I manually add it?

Answer 1

Sometimes there is no need for the loading message. If the page is cached and can switch directly to it then why show the loading message. If you absolutely want one there are two JQM methods that will do this for you.

1. $.mobile.showPageLoadingMsg() as the name indicates shows the loading message or icon.
2. $.mobile.hidePageLoadingMsg() will hide it again.

Here is a little example.

html

<div data-role="header">
    <a class="customBackBtn">Back</a>
    <h1>My Title</h1>
</div><!-- /header -->

js

$(document).on('click','.customBackBtn',function(){

    $.mobile.showPageLoadingMsg();

    setTimeout(function(){
        $.mobile.hidePageLoadingMsg();
        history.back();
    }, 1000);

});​​​​​​​​​​​​​​​​​​​​

working jsfiddle example