2011-09-21 20 views
8

Uso di jquery mobile Im utilizzando intestazione e piè di pagina persistenti. Il footer nav ha schede e quando fai clic su una scheda carica una pagina tramite ajax. Il problema è la transizione da una pagina all'altra, che è ajax che carica un div con l'ID specifico, è molto lento. Per la transizione della pagina occorrono 2-5 secondi. quando faccio clic su una scheda, si evidenzia un colore diverso ma non accade nulla, quindi pochi secondi dopo avviene la transizione. A volte, se fai clic per velocizzare le interruzioni di layout e il piè di pagina scompare. Sto facendo questo su un ipad con l'ultima versione di jquery mobile. Jquery mobile è davvero lento? Aspetterò che ios5 faccia la differenza?Jquery Mobile - Lento con transizioni di pagina

UPDATE

Ecco un frammento di codice:

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

fornire qualche codice che mostra ciò che si sta realmente facendo? come viene fornito l'ancora? hai usato le definizioni di pagina per caricare le pagine? aggiungere del codice, sarebbe utile .. – zyrex

+0

Provare a rimuovere l'animazione di transizione della pagina e vedere se carica la pagina più velocemente. Ciò limiterà se la richiesta di ajax si terrà per sempre o l'animazione stessa. – adam

risposta

1

A volte, se si fa clic su di digiunare le interruzioni di layout e il piè sparisce:

Questo è un problema è già stato risolto qui, non ha ancora trovato una soluzione: https://stackoverflow.com/questions/7484522/jquerymobile-click-on-background-fires-event-header-footer-data-position-fixe

Circa il tempo di caricamento, è davvero strano, provare a mettere a fuoco l'errore con la rimozione di parti del codice e restringere dove e perché si sta verificando il lungo tempo di caricamento ... spero che questo aiuti.

+0

Sto usando anche il plugin scrollview con jquery mobile. Avrebbe alcun effetto sul caricamento tra le pagine? – John

+0

In realtà ho appena rimosso il plugin scrollview e non molto più velocemente. Fondamentalmente ho le schede nel footer, quando clicco per andare a una scheda diversa si siede lì per alcuni secondi. Quindi avviene la transizione della pagina, in questo caso una diapositiva. Quindi faccio clic sulla scheda precedente nel footer e di nuovo si blocca per alcuni secondi, quindi passa nuovamente alla scheda precedente. Questo non solo sembra/sembra goffo, ma lascia aperte le persone che fanno doppio clic e quando ciò accade accadono cose strane come metà della pagina è sparita o il piè di pagina scompare o non accade nulla. – John

+0

prova a restringere da dove proviene l'errore (esclude parti passo per passo del tuo codice), a mio avviso non è un normale comportamento JQM. Lo stesso IPad funziona normalmente? Qualcosa sullo sfondo che lo rallenta o lo fa aspettare? – zyrex

5

Mi trovavo di fronte allo stesso problema. Disabilitare le transizioni fantastiche dello schermo lo ha risolto per me.

Per fare questo universalmente:

$.mobile.defaultPageTransition = 'none'; 
+1

Le prestazioni sono state migliorate drasticamente con RC3. Anche l'aggiornamento a Jquery Mobile ti aiuterà. – Charles

0

di utilizzare gli stessi ID più volte. Per me ha causato problemi simili. Prova a rimuovere/modificare gli ID duplicati.

Per esempio è sufficiente copiare-incollate questa sezione al fine di duplicarlo nella seconda pagina:

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