Jquery Mobile - Slow with page transitions

Using jquery mobile Im using persistant header and footer. The footer nav has tabs and when you click a tab it loads a page via ajax. The problem is the transition from one page to another, which is ajax loading a div with the specific id, is very slow. It takes 2-5 seconds for the page transition to happen. when I click a tab it highlights a different color but nothing happens, then a few seconds later the transition happens. Sometimes if you click to fast the layout breaks and the footer dissappears. Im doing this on an ipad with the latest version of jquery mobile. Is jquery mobile just really slow? Will waiting till ios5 make all the difference?

UPDATE

Here is a snippet of code:

<div data-role="page" id="page1">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  &l开发者_运维问答t;div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>

<div data-role="page" id="page2">
  <div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
    <a href="#dialog" data-transition="slidedown" data-icon="check">Add</a>
  </div>
  <div data-role="content">
    <ul data-role="listview">
      <li data-role="list-divider"><span class="ui-li-count">2</span></li>
      <li>
        <h3>Stephen Weber</h3>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
      </li>
</ul>
  <div data-role="footer" class="nav-glyphish-example" data-id="myfooter" data-position="fixed"> 
    <div data-role="navbar" class="nav-glyphish-example" data-grid="b">
      <ul>
        <li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
        <li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
        <li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>
      </ul>
    </div>
  </div>

I was facing the same problem. Disabling the fancy screen transitions fixed it for me.

To do this universally:

$.mobile.defaultPageTransition = 'none';

Sometimes if you click to fast the layout breaks and the footer dissappears:

This is a problem is adressed already here, did not find a solution yet: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

About the loading time, it really is strange, try to focus the error with removing parts of your code and narrow down where and why the long loading time is occurring... hope this helps.

You use the same ids multiple times. For me it caused similar problems. Try to remove/change the duplicated ids.

For example you simply copy-pasted this section in order to duplicate it on the second page:

<li><a href="#page1" data-transition="reverse slide" id="chat" data-icon="custom" class="ui-btn-active ui-state-persist">Link 1</a></li>
<li><a href="#page2" data-transition="slide" id="email" data-icon="custom">Link2</a></li>
<li><a href="#page3" data-transition="slide" id="skull" data-icon="custom">Link 3</a></li>