2012-05-01 16 views
5

Wierzę, że ten post stanowi rozwiązanie mojego problemu Flickering when navigating between pages. Konkretnie:Kod Jquery Mobile do migotania Nawigacja z PhoneGap

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

idę z C# świata i dość dużo pojęcia jak do jQuery komórkowego. Chciałbym dodać ten fragment, ale nie wiem, gdzie. Jeśli to ma znaczenie, myślę, że chciałbym dodać to do jquery.mobile-1.1.0.rc.1.js, ale wtedy nie wiem gdzie, jeśli to właściwy plik.

+0

Właśnie zauważyłem, że używasz jQuery Mobile 1.1.0 RC-1, naprawdę powinieneś zaktualizować do wersji 1.1.0 Final: http://jquerymobile.com/download/ – Jasper

Odpowiedz

14

Ten kod należy uruchomić po dołączeniu jQuery Core i przed dołączeniem jQuery Mobile. Powodem jest to, że aby uruchomić kod, jQuery musi być obecny, ale ta procedura obsługi zdarzenia musi być powiązana przed zainicjowaniem jQuery Mobile.

Na przykład:

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

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

Również UA wąchania nie jest konieczne, ponieważ jQuery Komórka testuje urządzenie do CSS 3D przekształcić wsparcie i używa tylko ładne przejścia na urządzeniach wspierać ich. Robimy to dla ciebie w jQuery Mobile 1.1.0+, ale domyślne przejście awaryjne to fade, więc i tak musisz zmienić to ustawienie domyślne.

Definiowanie przejścia zastępczych dla wsparcia non-3D

Domyślnie wszystkie przejścia znikną z wyjątkiem 3D przekształcić wymagają wsparcia. Urządzenia bez obsługi 3D zostaną przywrócone do przejścia zanikającego, niezależnie od określonego przejścia. Robimy to, aby zapobiegawczo wykluczyć słabo działające platformy, takie jak Android 2.x z zaawansowanych przejść , i zapewnić, że nadal będą działać płynnie. Zauważ, że istnieją platformy, takie jak Android 3.0, które obsługują technicznie transformaty 3D , ale nadal mają słabą wydajność animacji, więc nie będzie to gwarantować, że każda przeglądarka będzie w 100% wolna od migotania, ale staramy się, aby to było odpowiedzialne.

Przejście awaryjne dla przeglądarek, które nie obsługują transformacji 3D można skonfigurować dla każdego typu przejścia, ale domyślnie określamy "zanikanie" jako zastępstwo. Na przykład, będzie to ustawić awaryjnej przejście na przejściu slideout „none”:

$.mobile.transitionFallbacks.slideout = "none" 

Źródło: http://jquerymobile.com/demos/1.1.0/docs/pages/page-transitions.html

jako ogólnej obserwacji zauważyłem, że można umieścić oświadczenie if/then wewnątrz obsługi zdarzeń, możesz równie dobrze umieścić go na zewnątrz, więc jeśli nie jest to urządzenie z systemem Android, zdarzenie wiążące/wypalanie nigdy nie musi wystąpić.

Na przykład:

<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! To było bardzo szczegółowe i bardzo pomocne! Dziękuję Ci! Jeśli chodzi o lokalizację kodu ... Ahhh cóż, to pokazuje, jak mało wiem. Myślałem, aby umieścić go w jednym z plików js, ale tak naprawdę idzie on w pliku html. – GPGVM

+0

@ user1278561 Możesz * umieścić * kod na końcu pliku JQuery Core, ponieważ w tym momencie jQuery Core będzie dostępny do wykonania powiązania zdarzenia, ale jQuery Mobile nie zostanie jeszcze zainicjowany. – Jasper

0

mam ten sam problem, a żadna z rozwiązań on-line wydawało się do pracy. Testuję na galaxy mini z systemem Android 2.3.6, a nawet zanikanie było straszne pod względem UX.

fiddling z mojego kodu, pecha, że ​​znalazłem ten poprawił skuteczność moich nieco

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

I jakby cudem, nie miga! Niektóre usterki występują sporadycznie, ale zdecydowanie lepsze niż wcześniej!

Powiązane problemy