CODEWITHSUNDEEP
jquery-mobile
lovespring
lovespring

Reputation: 19589

How to let the ajax loading show when page transition in jquery mobile?

sometimes, It will show, sometimes, not, so, how to ensure the ajax loading indicator show in jquery mobile?

Upvotes: 0

Views: 582

Answers (3)

Gajotres
Gajotres

Reputation: 57309

Unless there's a major problem in your app, what you have described is a normal situation.

While page transition can take a lot of time (usual page loading/transition time on desktop browsers is 670 ms), page loading into the DOM takes only few miliseconds (usually 3-5 ms). AJAX loader will show only if page loading (into the DOM) takes more then 10ms. Other page transition actions don't count into AJAX call so animation will not be shown after page has been loaded into the DOM.

Actions during page loading/transition:

  • Page load and processing: 3ms (AJAX loader will show only during this action, if it takes more then 10ms)
  • Page enhance: 45ms
  • Transition: 604ms

To read more about this take a look at my other ARTICLE, or find it HERE, search for the chapter called: Page Change Times

One more thing, unless you are using normal page loading AJAX loader will not be show (if your link has an attribute rel="external" or data-ajax="false").

Upvotes: 2

gcatalfamo
gcatalfamo

Reputation: 343

when you do this:

$.mobile.changePage( "#page-home", { transition: "none"} );

add this:

$.mobile.showPageLoadingMsg();

don't forget to add

$.mobile.hidePageLoadingMsg();

at the end of the pageLoad function

Upvotes: 0

user2100493
user2100493

Reputation: 1298

In order to ensure that ajax navigation is done by default Jquery Mobile will add ajax navigation to pages loaded into the DOM so long as you do NOT add the data-ajax="false" attribute to your links and buttons. Otherwise chances are you may have added a global modification that has disabled ajax navigation on certain pages.

OR you could have rel="external" as an attribute in some of your links and buttons, which disables ajax navigation.

If you could be more specific, ie post a jsfiddle example of your problem, I could give you a better explanation. Also please mention what version of Jquery Mobile you are using.

Upvotes: 0

Related Questions