0

jQuery mobile does the nice page loading animation when a page is being loaded, but for a page that is heavy with data, the user can still see a 'white' page momentarily until the newly loaded page is displayed. To get rid of that, I am using the following code:

$.mobile.loading( 'show', {
text: 'foo',
textVisible: false,
theme: 'a',
html: ""
});

In spite of that I see the white page still. Is there a way to show an animation on the white page until the actual page loads? I like http://www.amerimark.com website's way of displaying the loading message when you click on the left navigation buttons.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
WhatsInAName
  • 724
  • 2
  • 12
  • 32

1 Answers1

0

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 and transitions are 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 and pageshow event will trigger almost immediately . But you can see it is working example if you comment this line:

$.mobile.loading('hide');

In your case it should work because pageshow event will be prolonged until page is loaded.

Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks for your reply. I tried your code but the problem that I am facing is, the loader is only displayed on the loaded page (source) and I still see the "white" page before the 2nd (destination) page is displayed. Any way to not display the momentary white, or showing a loader on the white? May be adding an artificial delay while displaying the loader? Thanks again. – WhatsInAName Apr 24 '13 at 19:27