phonegap+jquerymobile：页面跳转出现白屏的解决方案

用phonegap+jquerymobile开发android程序时，不同的page跳转出现了白屏，很难看，也影响了用户体验。

1.对此jquerymobile官方给出的解决方案是：

Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be throughly tested on the target platform before deployment. This workaround is known to cause performance issues, and browser crashes on some platforms especially Android. Add the following code to your custom css.

.ui-page { -webkit-backface-visibility: hidden; }




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


2.如果不行，或者出现其他问题，可以尝试一下

// 加载jQuery
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

// 加载一段js（见下文）
<script type="text/javascript" src="mobile/js/mobile-site-custom-jqm-defaults.js"></script>

// 加载 jQuery Mobile
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

// 加载你自己的代码
<script type="text/javascript" src="mobile/js/script.js"></script>

其中mobile-site-custom-jqm-defaults.js内容如下

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   defaultPageTransition: 'none'
  });
});

3.如果上方法都不可行，还可以尝试一下关闭android的硬件加速

在androidmenifest.xml中设置

<application
            android:label="@string/app_name0"
            android:allowClearUserData="false"
            android:icon="@drawable/logo"
            android:logo="@drawable/logo"
            android:name="com.xx.xx"
            android:hardwareAccelerated="false">