event before pageshow

Question

In my single page jquery mobile app, I am using $('#div').on('pageshow', function(){}) to load data on some of my pages from a json web service (I also use pageinit on others that don't need to be reloaded every time they are viewed).

While this has been working great, I am having an issue with the page loading blank, and then being redrawn after the data is loaded. I am sure that this is the intended performance, but I would really like to load the data prior to the page being rendered so that visitors don't see the blank page first.

Is there a before pageload event? also, is there a good list somewhere of the events that can be called on a page using .on()? I have searched for hours and have not been able to find anything.

Answer 1

is it just an issue where you are worried about the page flickering?

If so, you could always do:

body { display:none }

then after data load with your jquery

$("body").show();

You could also do a "loading" gif graphic (http://www.ajaxload.info) on the screen rather than just not displaying anything... that would be a better approach.

Answer 2

You should use pagebeforeshow event:

$('#div').on('pagebeforeshow', function(){})

Take a look at my other ARTICLE, there's a full list of page events triggering, from the first one to the last one. Or it can be found HERE.