Loading image with multi page - jquery-mobile

Question

I'm developing a new app with Phonegap and jQuery Mobile.
I'd like that when content are still in "loading status" (and the page isn't completly showed), appears an loading image (default gif animate of jqm).
My app is a multi-page application like this:
<div data-role="page" id="page1">
<p>Some stuff for page 1 here</p>
</div>
<div data-role="page" id="page2">
<p>Some stuff for page 2 here</p>
</div>
<div data-role="page" id="page3">
<p>Some stuff for page 3 here</p>
</div>
I try with:
$(document).on('pageshow','#page3', function(){
$.mobile.showPageLoadingMsg();
// my code
$.mobile.hidePageLoadingMsg();
});
But the loading image don't appears
I try with:
$(document).on('pagebeforeshow','#page2', function(){
$.mobile.showPageLoadingMsg();
});
and
$(document).on('pageshow','#page2', function(){
//all code
$.mobile.hidePageLoadingMsg();
});
But the loading don't work.
What is the correct way for using the loading image with jQuery Mobile?

Answer 1

There's a slight problem with your request.
First, you will not be able to show/hide ajax loader without set timeout. There's is only one situation where this is possible without and that is during the pageshow event. In any other case settimeoutis needed to kickstart to loader (at least for web kit browsers, in firefox it works out of box).
Here's a working example: http://jsfiddle.net/Gajotres/Zr7Gf/
$(document).on('pagebeforecreate', '#index', function(){
var interval = setInterval(function(){
$.mobile.loading('show');
clearInterval(interval);
},1);
});
$(document).on('pageshow', '#index', function(){
var interval = setInterval(function(){
$.mobile.loading('hide');
clearInterval(interval);
},1);
});
But here we have a different problem, unless your page is complex enough new page will be loaded very fast. jQuery mobile has internal timer that looks how fast page is loading into the DOM. If page is complex and loading takes more then 10 ms it will display the loader in any other case loader will not be shown, no matter how hard you try.
Also take notice that only DOM loading will count into that 10 ms. Page styling is out of calculation. So no matter if page loading looks longer only DOM loading counts.
My example will not show loader because it is a very simple example. But you can see it is working example if you comment this line:
$.mobile.loading('hide');