Jquery Mobile: lento con las transiciones de página

Question

Uso de jquery mobile Im utilizando encabezado y pie de página persistentes. El navegador de pie de página tiene pestañas y cuando haces clic en una pestaña, carga una página mediante ajax. El problema es que la transición de una página a otra, que es ajax cargando un div con la identificación específica, es muy lenta. La transición de página tarda entre 2 y 5 segundos en suceder. cuando hago clic en una pestaña, se resalta un color diferente, pero no pasa nada, luego unos segundos más tarde ocurre la transición. A veces, si hace clic para acelerar, el diseño se rompe y el pie de página desaparece. Estoy haciendo esto en un ipad con la última versión de jquery mobile. ¿Es jquery mobile realmente lento? ¿Esperar hasta ios5 marcará la diferencia?

ACTUALIZACIÓN

Aquí es un fragmento de código:

<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> 
    <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> 

Answer 1

veces si hace clic para ayunar los saltos de disposición y el pie de página dissappears:

Ésta es Ya se ha resuelto un problema aquí, todavía no hemos encontrado una solución: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

Acerca del tiempo de carga, realmente es extraño, trate de enfocar el error eliminando partes de su código y acota dónde y por qué se produce el largo tiempo de carga ... espero que esto ayude.

Answer 2

Tenía el mismo problema. Desactivé las extravagantes transiciones de pantalla para solucionarlo.

Para hacer esto universalmente:

$.mobile.defaultPageTransition = 'none'; 

Answer 3

utiliza el mismo ID en múltiples ocasiones. Para mí causó problemas similares. Intenta eliminar/cambiar los identificadores duplicados.

Por ejemplo, usted simplemente copiar-pegar esta sección con el fin de duplicar en la segunda página:

<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>