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