Add AJAX loading external content into template

I have purchase this template: [login to view URL] It works great but I don't like the way it loads content: all the content is in "[login to view URL]" file. It makes a huge file to load at the opening of the website. So I'm looking to make page content outside the [login to view URL] file and load these files at demand by AJAX. You can download the files to take a look: [login to view URL] I have build the external files ([login to view URL], [login to view URL], [login to view URL], [login to view URL], [login to view URL], [login to view URL]). I want these files to be loaded when they are click by the nav items. I want the content of "<section>" of external files to be loaded in <li id="main-content"> or <li id="main-content2"> (depending of the state of the animation) by AJAX (jQuery load()) I want the AJAX loading to be inserted in the animations scripts (when we click a link the spinner animation appears, when the page is loaded, the "whipe" animation is done to replace the content.) I want that the AJAX pages to be crawlable by search engines. I found this on Google: [login to view URL] The URL must change when the content is loaded. The Back and Forward button should work to navigate into pages. I want it to be compliant with "Progressive enhancement": [login to view URL]