Best jQuery Mobile Page Setup

I'm starting to develop a mobile version of a website that we run. Our chosen framework is开发者_高级运维 jQuery Mobile since it's got a lot of promise and is moving at a pretty impressive rate.

Before I start I'd like to get a few suggestions about the best way to setup the page layout.

We know that on the "home screen" there will be four links to separate "pages". The points I'm most interested in, is whether these pages should be created on request, or loaded with the home screen content?

The next question is how the sub-pages should be linked. One of home screen pages will have a sub-menu of three more links. One of these sub-sub-pages then has a list which again will link to another page.

Obviously I can't have all of the content being loaded at once, and it'd be awesome if I could get each one of these to save state (since the data would be pulled in from a database). So what's the best way?

As the pages does not seem to contain much data, I think it would be better to load them on request. Only data required by each page would be loaded that way. For the dynamic content that you want to pass along to each page, it would be ideal to do it using jQuery. For each page created, link it with a context that is passed along with the page using jQuery.

Best way would be to load the additional pages on request, you can always load them immediately after loading the first screen but then it would be terrible on users who are on limited data plan.

If a user visits homepage and quits, then all the additional information loaded would still account for his data and yet would be wasted.

What I suggest

1. Load Homepage
2. Set JS timeout of 5secs
3. Load other pages into separate divs as screens

when navigating, all you need is to switch screens instead of switching pages. You should not load more than one level of pages at a given time.