Jquery Mobile - Lent avec transitions de pages

Question

Utilisation de jquery mobile Im en utilisant l'en-tête et le pied de page persistants. Le pied de navigation a des onglets et lorsque vous cliquez sur un onglet, il charge une page via ajax. Le problème est que la transition d'une page à une autre, qui est ajax en chargeant une div avec l'identifiant spécifique, est très lente. Il faut 2 à 5 secondes pour que la transition de page se produise. quand je clique sur un onglet, il met en évidence une couleur différente mais rien ne se passe, puis quelques secondes plus tard, la transition se produit. Parfois, si vous cliquez pour accélérer les sauts de mise en page et le pied de page disparaît. Je fais cela sur un ipad avec la dernière version de jquery mobile. Est-ce que jquery mobile est vraiment lent? Est-ce que l'attente jusqu'à ios5 fera toute la différence?

MISE À JOUR

Voici un extrait de 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> 
    <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

Parfois, si vous cliquez pour accélérer les pauses de mise en page et le pied de page dissappears:

C'est un problème est déjà abordé ici, n'a pas encore trouvé de solution: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe Au sujet du temps de chargement, c'est vraiment étrange, essayez de vous concentrer sur l'erreur en supprimant des parties de votre code et affinez où et pourquoi le temps de chargement est long ... espérons que cela aide.

Answer 2

Je faisais face au même problème. Désactiver les transitions d'écran fantaisie l'a fixé pour moi.

Pour ce faire universellement:

$.mobile.defaultPageTransition = 'none'; 

Answer 3

Vous utilisez le même ids plusieurs fois. Pour moi, cela a causé des problèmes similaires. Essayez de supprimer/modifier les ID en double.

Par exemple vous avez collé la copie simplement cette section afin de le dupliquer sur la deuxième 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>