Question

I have put together a simple webapp with jquery mobile. When the user visits the main page they will be confronted with a list of buttons that they can click on to determine where to go.

The buttons are generated from an ajax call to a php script which makes a call to a database to figure out what options are available.

There are several pages, and each page makes its own ajax call when on pageshow. Each button is a link with data-role="button" so they look nice.

However a problem I am facing is that in between page changes, there is a slight delay that causes the buttons to go ugly before the page changes.

This is more evident on a slow (or busy) computer. If it takes a long time to set-up the page (perhaps there is lots of data returned from the DB) the delay will also occur and the buttons go ugly.

What might be the cause of this?

Answer 1

There are (at least) three approaches to handle that:

• Add the content before showing the page: by tying the addition of the dynamic content to the event pagecreate that is triggered before the enhancing of the page by jquery mobile. Obviously, if your calls are asynchronous, you may not have had the chance to retrieve and insert your dynamic content before the page is enhanced.
• Hide the elements before they are shown: it is how I do it (at list with jqm lists, haven’t had to do it with buttons). I create my elements with a css class that boils down to display:none;, and remove this class after I have manually called the enhancement
• Enhance the buttons one after the other: in order not to have to wait for the whole elements to have been inserted before they start looking nice, you could call .button() on each individual element just after you insert it (if you insert them in the DOM one after the other). You might still get a slight “blink” from ugly to nice for each element, but that should be barely noticeable if at all.