2012-05-01 1 views
5

Credo che questo post sia la soluzione ai miei problemi Flickering when navigating between pages. In particolare:Jquery Codice mobile per lo sfarfallio della navigazione con PhoneGap

$(document).bind("mobileinit", function() 
{ 
    if (navigator.userAgent.indexOf("Android") != -1) 
    { 
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.defaultDialogTransition = 'none'; 
    } 
}); 

vengo dal C# mondo e praticamente all'oscuro per quanto riguarda jQuery mobile. Vorrei aggiungere questo frammento ma non sono sicuro di dove. Se è importante, penso che lo aggiungerei a jquery.mobile-1.1.0.rc.1.js ma poi non so dove ci sia, se questo è il file giusto.

+0

Ho appena notato che stai usando jQuery Mobile 1.1.0 RC-1, dovresti davvero aggiornarlo alla versione 1.1.0 finale: http://jquerymobile.com/download/ – Jasper

risposta

14

Questo codice deve essere eseguito dopo aver incluso jQuery Core e prima di includere jQuery Mobile. Il motivo è che per eseguire il codice, jQuery deve essere presente, ma questo gestore di eventi deve essere associato prima dell'inizializzazione di jQuery Mobile.

Ad esempio:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
$(document).bind("mobileinit", function() 
{ 
    if (navigator.userAgent.indexOf("Android") != -1) 
    { 
    $.mobile.defaultPageTransition = 'none'; 
    $.mobile.defaultDialogTransition = 'none'; 
    } 
}); 
</script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 

Documentazione: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Inoltre, l'UA sniffing non è necessario perché jQuery Mobile mette alla prova il dispositivo per il 3D CSS trasformare il supporto e utilizza solo le belle transizioni su dispositivi che supportarli Questo è fatto per te in jQuery Mobile 1.1.0+, ma la transizione di fallback predefinita è fade quindi dovresti comunque modificare quella predefinita.

Definizione delle transizioni di ripiego per il supporto non 3D

Per impostazione predefinita, tutte le transizioni, ad eccezione di dissolvenza richiedono 3D trasforma il supporto. I dispositivi privi del supporto 3D torneranno a una transizione di dissolvenza, indipendentemente dalla transizione specificata. Facciamo questo in modo proattivo al escludendo piattaforme poco performanti come Android 2.x dalle transizioni avanzate e assicuriamo che abbiano ancora un'esperienza fluida. Notare che ci sono piattaforme come Android 3.0 che supportano tecnicamente le trasformazioni 3D , ma hanno ancora prestazioni di animazione scadenti, quindi questo non garantirà che ogni browser sarà sfocato al 100%, ma proviamo a indirizzare questo responsabilmente a .

La transizione di fallback per i browser che non supportano le trasformazioni 3D può essere configurata per ogni tipo di transizione, ma per impostazione predefinita si specifica "fade" come fallback. Ad esempio, questo imposterà il fallback di transizione per il passaggio a scorrimento su "none":

$.mobile.transitionFallbacks.slideout = "none" 

Fonte: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

Come osservazione generale ho notato che hai messo la dichiarazione if/then all'interno il gestore di eventi, potresti anche metterlo fuori, quindi se non è un dispositivo Android l'evento che lega/spara non deve mai accadere.

Ad esempio:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script> 
if (navigator.userAgent.indexOf("Android") != -1) 
{ 
    $(document).bind("mobileinit", function() 
    { 
     $.mobile.defaultPageTransition = 'none'; 
     $.mobile.defaultDialogTransition = 'none'; 
    }); 
} 
</script> 
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
+0

WOW! E 'stato molto verboso e MOLTO utile! Grazie! Per quanto riguarda la posizione del codice .... Ahhh bene che mostra quanto poco lo so. Stavo pensando di metterlo in uno dei file js ma in realtà va in linea nel documento html. – GPGVM

+0

@ user1278561 Si * potrebbe * inserire il codice alla fine del file jQuery Core, perché a quel punto jQuery Core sarà disponibile per eseguire l'associazione degli eventi ma jQuery Mobile non sarà ancora inizializzato. – Jasper

0

io ho lo stesso problema, e nessuna delle soluzioni sembrava online per lavorare. Sto provando su una galaxy mini con Android 2.3.6 e persino la dissolvenza è stata terribile in termini di UX.

trafficando con il mio codice, da fortuna ho scoperto che questo ha migliorato la mia prestazione un po '

$(document).on("mobileinit", function(){ 
     $.mobile.defaultPageTransition = 'slide'; 
     $.mobile.transitionFallbacks='none'; 
}); 

E come per miracolo, nessun luci intermittenti! Occasionalmente si verificano alcuni problemi tecnici, ma è decisamente meglio di prima!