Question

After a lot of google’ing and reading forums I’ve not found a suitable answer.

So far all I have found is something like below:

• show loading message
• call change page
• hide loading message

This would work but I would have to do this every time I call load/change page (which is a lot).

Which would leave me either to make a middle man function like below:

function customLoader(url){
    showLoader();
    $.mobile.changePage(url);
    hideLoader();
}

Is there anyway of binding it to the change page event?
So that it shows from the second changePage is called but hides once changePage is away…

I know the above middle man method would work but would like something more tidy and nicer to implement as there’s a lot of html/js files.

Answer 1

Something like this:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $.mobile.showPageLoadingMsg(true);
        setTimeout(function () {
            $.mobile.changePage('#second');
        }, 1000);
    });    
});

$("#second").live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

Timeout is here only so you can see it’s working successfully. This is a light example so transition is fired quickly. Remove it in your real code.

And here’s an example: http://jsfiddle.net/Gajotres/arrHd/

Every change page event cycle has a order of events occuring when a page A is transiting to a page B. No matter which action is used to trigger a change page you can always disable it when page B i successfully loaded. If you want to find more about page load order take a look at this link: https://stackoverflow.com/a/14010308/1848600. There you will find a lot about jQM page dynamics.

In case you want to implement this into every page transition use this:

$('[data-role="page"]').live('pageshow', function () {
    $.mobile.hidePageLoadingMsg();
});

This will hide a ajax loader (if it is open) every time a different page is successfully loaded and shown.