完美解决 Phonegap jQeuryMobile 闪屏 问题

在切换page或者弹出dialog时,会出现闪屏情况,综合网络上各种方法,得出以下方法可完美解决:

1、首先界面页面切换闪屏:

在加载jQuery后,加载jQuery Mobiel之前,插入js语句进行修复:
<script src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript"> 
  
$(document).bind("mobileinit", function()  
{  
   if (navigator.userAgent.indexOf("Android") != -1)  
   {  
 $.mobile.defaultPageTransition = 'none';  
 $.mobile.defaultDialogTransition = 'none';  
   }  
}); 
</script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>

2、修复弹出对话框闪屏
  从弹出的对话框返回页面时,底部设置了fixed 的footer 会闪,解决方法为在该页面添加以下css(不影响页面外观):
    <style type="text/css">
  .ui-mobile, .ui-mobile .ui-page, .ui-mobile [data-role="page"], 
.ui-mobile [data-role="dialog"], .ui-page, .ui-mobile .ui-page-active { 
overflow: hidden; 
-webkit-backface-visibility: hidden; 

.ui-header { 
position: fixed; 
z-index:10; 
top:0; 
width:100%; 
padding:0 0; 


.ui-content { 
padding-top: 57px; 
padding-bottom: 54px; 
overflow: auto; 
position: absolute; 
top: 0; 
right: 0; 
bottom: 0; 
left: 0; 

.ui-footer { 
position: fixed; 
z-index:10; 
bottom:0; 
width:100%; 


  </style>

3、补充,html头部信息meta修改如下:

< meta name="viewport" content="width=device-width, user-scalable=no" />


各位如有更好的方法,请留言分享、讨论。

posted @ 2013-09-23 11:00  zuike  阅读(1971)  评论(0编辑  收藏  举报