Display Loading Animation Spinner while Loading Page

Question

I want to show loading animation spinner in a JQueryMobile page which is loaded w/ ajax off.

The page is loaded with data-ajax="false" or rel="external"

I tried on pagebeforecreate and pageshow event but its NOT working as I expected:

$( '#page' ).live( 'pagebeforecreate',function(event){
    $.mobile.loading('show');
});

$( '#page' ).live( 'pageshow',function(event){
    $.mobile.loading('hide');
});

Answer 1

There's a slight problem with your request.

First, you will not be able to show/hide ajax loader without set interval. There's is only one situation where this is possible without and that is during the pageshow event. In any other case setinterval is needed to kickstart to loader.

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');