Phonegap/ jquery mobile 'pagebeforeshow' event not working correctly for me on Android?

Question

In my app there is quite a delay to load the next page after the initial login screen.

In my iOS app I was able to start an activity indicator in the pagebeforeshow event so the user can tell that the app is loading and not just a blank screen. As below

$(document).on("pagebeforeshow", "#mainScreen", function() 
{ 

$('body').addClass('ui-loading'); 
$.mobile.loading("show", { 
text:"Loading", 
textVisible: $.mobile.loader.prototype.options.text, 
theme: $.mobile.loader.prototype.options.theme, 
}); 
}); 

$(document).on("pageshow", "#mainScreen", function() 
{ 
$('body').removeClass('ui-loading'); 
}); 

I am having a problem displaying the spinner on android devices. I have ran the app with an alert in the pagebeforeshow event so i know that it is triggered but I can't figure out why it won't display

Answer 1

Why don't you use the ajaxStart event?

$(document).ajaxStart(function() {
    $.mobile.loading('show');
});

$(document).ajaxStop(function() {
    $.mobile.loading('hide');
});