如何呈现一个jquerymobile页面？

Question

I have an PhoneGap Application which uses JQM. To navigate I use a navbar-widget, which opens the requested page (There are 4 pages). The first time a page is accessed through this navigation it needs quite a while to show up (depending on the device between 6 and 10 sec). I assume this is because of the rendering process of JQM. Hence this behaviour is not exactly what I want, I wonder if I could render the pages manually the first time the application gets started (ie while showing a splash screen). Has anyone done something similar before or has someone an idea of how to start this rendering process manually?

Answer 1

I would presume from your question that you are using several HTML pages through navbar element.

This is your first mistake. I hope this is not a big project for you cause you are going into the world of pain.

First, you can prefetch jQuery Mobile pages, that will improve page change time, read more about it here . Unfortunately this solution has few problems, mainly sometime it will not work.

My best advice would be to change you app design. Your main navbar pages should be part of a single HTML file, it is also called a multipage template. This is fastest solution but most resource hungry. Also your pages should not be content heavy, it is a main jQuery Mobile app performance killer.

I have to excellent articles for you that will help you build a faster jQuery Mobile app, take a look here and here .

If it is not to late I would advise switching to Sencha Touch. It will take some time to learn it (it has a completely different approach then jQuery Mobile) but in the end you will have a much faster app. I am telling you this as a jQuery Mobile developer, not a Sencha Touch one.