2012-05-01 20 views
5

Creo que esta publicación es la resolución de mi problema Flickering when navigating between pages. Específicamente :Código de Jquery Mobile para parpadeo Navegación con PhoneGap

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

estoy viniendo desde el C# mundo y más o menos desorientado en cuanto a jQuery móvil. Me gustaría agregar este fragmento pero no estoy seguro de dónde. Si importa, creo que lo agregaría al jquery.mobile-1.1.0.rc.1.js, pero no sé dónde, si ese es el archivo correcto.

+0

Acabo de notar que estás usando jQuery Mobile 1.1.0 RC-1, realmente deberías actualizar a 1.1.0 Final: http://jquerymobile.com/download/ – Jasper

Respuesta

14

Este código debe ejecutarse después de incluir jQuery Core y antes de incluir jQuery Mobile. La razón es que para ejecutar el código, jQuery debe estar presente, pero este controlador de eventos debe estar vinculado antes de que jQuery Mobile se inicialice.

Por ejemplo:

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

Documentación: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Además, la UA oler no es necesario porque jQuery Mobile pone a prueba el dispositivo para 3D CSS transformar apoyo y sólo utiliza las transiciones agradables en los dispositivos que apoyalos. Esto se hace para usted en jQuery Mobile 1.1.0+, pero la transición de respaldo predeterminada es fade, por lo que tendrá que cambiar ese valor predeterminado de todos modos.

Definición de transiciones de repliegue de apoyo no-3D

Por defecto, todas las transiciones de fundido, excepto requieren transformación 3D apoyo. Los dispositivos que carecen de soporte 3D recurrirán a una transición de fundido, independientemente de la transición especificada. Hacemos esto de forma proactiva. excluye las plataformas de bajo rendimiento como Android 2.x de las transiciones avanzadas y garantiza que tengan una experiencia fluida. Tenga en cuenta que hay plataformas como Android 3.0 que técnicamente admiten transformaciones 3D , pero aún tienen un bajo rendimiento de animación, por lo que esto no garantiza que cada navegador esté 100% libre de centelleo, pero tratamos de hacerlo de forma responsable con .

La transición de reserva para los navegadores que no admiten transformaciones 3D se puede configurar para cada tipo de transición, pero por defecto especificamos "fundido" como la alternativa. Por ejemplo, esto hará que la transición de repliegue para la transición deslizable a "ninguno":

$.mobile.transitionFallbacks.slideout = "none" 

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

Como observación general me di cuenta de que se pone la declaración if/then interior el controlador de eventos, es mejor que lo ponga afuera, de modo que, si no es un dispositivo Android, el enlace/activación del evento nunca tiene que ocurrir.

Por ejemplo:

<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

¡GUAU! ¡Eso fue muy detallado y MUY útil! ¡Gracias! En cuanto a la ubicación del código ... Ahhh, eso demuestra lo poco que sé. Estaba pensando en ponerlo en uno de los archivos js, pero realmente va en línea en el documento html. – GPGVM

+0

@ user1278561 Usted * podría * colocar el código al final del archivo jQuery Core, porque en ese momento jQuery Core estará disponible para hacer el enlace de evento pero jQuery Mobile aún no se habrá inicializado. – Jasper

0

tengo el mismo problema, y ​​ninguna de las soluciones en línea parecía funcionar. Estoy probando en un mini galaxy con Android 2.3.6 e incluso el desvanecimiento fue terrible en términos de UX.

perder el tiempo con mi código, de suerte me encontré con que esto mejoró un poco mi actuación

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

Y como por milagro, no hay parpadeos! Algunos glitches ocurren ocasionalmente, ¡pero definitivamente es mejor que antes!

Cuestiones relacionadas