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