CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
lollercoaster
lollercoaster

Reputation: 16503

jquery mobile stalling between page changes

I have a jQuery mobile app which is paginated but all one DOM. But I've noticed that when clicking a link , ie: <a href="#page2">Page 2</a> that sometimes it takes a while to load whatever is on the next page. Even worse, jQuery mobile keeps the previous text from the first page up and during the transition, both texts and elements can be seen - so ugly!

My question is what event(s) I can use to hide these things / display a spinner in between to show user that something IS happening, but that they need to be patient and not get tap/click happy in the meantime.

Ideally, I would want 2 events. One start and one stop. Thus:

  1. event1 starts, I hide Page 1 and display spinner
  2. spinner continues to spin and work is being done (google maps loaded, etc)
  3. event2 fires, the page is done loading. I show Page 2 and stop spinner.

Any ideas?

Upvotes: 0

Views: 297

Answers (1)

Romain
Romain

Reputation: 1302

You can use the document event "pagebeforechange" that is triggered before a new page is loaded, for triggering your event 1, and the page event "pageshow" for your event 2

$(document).on( "pagebeforechange", function( e, data ) {
    showSpinner();
});

$("div[data-role]='page'").on("pageshow",function(event,data) {  
    hideSpinner();
});

Upvotes: 1

Related Questions