How should I structure an interactive web app designed for use on an ipad? [closed]

[R-Cubed]

I'm creating an html5 interactive for ipad which will effectively just be a website that loads all content on a single page. To do this I was planning on using jQuery.load() to dynamically pull in the relevant data for the section you navigate to.My thinking behind this was that the user would only load up the resources they need for the sections they visit. However, realistically the user probably will visit every section the interactive. Only one section in particular needs to access content from the server (since this will be updated periodically) so will this make my ajax pointless, except for the page that loads the dynamic content?The alternative is to have EVERY element/script on this single page and have the elements hidden and then show/hide depending on what section you're in. My concern with this is the strain it'll put on the ipad? There will be a lot of animation in this interactive and I'm concerned about how this will run if I have all these hidden elements.It I take the latter approach, is it better to create say 5 separate divs for each section and have all the relevant content within each div (with possible duplication of elements). Or is it more efficient/less resource-hungry to have ONE div and add/remove the required elements?I realise the answer to this could be classed as subjective but surely there's an objectively superior approach to all this?Thanks