PhoneGap中文网

 找回密码
 立即注册
查看: 20673|回复: 2
打印 上一主题 下一主题

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

[复制链接]

493

主题

2035

帖子

6894

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6894
跳转到指定楼层
楼主
发表于 2013-8-25 21:08:08 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
phonegap+jquerymobile开发android程序时,不同的page跳转出现了白屏,很难看,也影响了用户体验。

1.对此jquerymobile官方给出的解决方案是:
  1. 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.
  2. .ui-page { -webkit-backface-visibility: hidden; }
复制代码
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html


2.如果不行,或者出现其他问题,可以尝试一下
  1.     // 加载jQuery  
  2.     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  
  3.       
  4.     // 加载一段js(见下文)  
  5.     <script type="text/javascript" src="mobile/js/mobile-site-custom-jqm-defaults.js"></script>  
  6.       
  7.     // 加载 jQuery Mobile  
  8.     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
  9.       
  10.     // 加载你自己的代码  
  11.     <script type="text/javascript" src="mobile/js/script.js"></script>  
复制代码
其中mobile-site-custom-jqm-defaults.js内容如下
  1.     $(document).bind("mobileinit", function(){  
  2.       $.extend(  $.mobile , {  
  3.        defaultPageTransition: 'none'  
  4.       });  
  5.     });  
复制代码
3.如果上方法都不可行,还可以尝试一下关闭android的硬件加速

在androidmenifest.xml中设置
  1.     <application  
  2.                 android:label="@string/app_name0"  
  3.                 android:allowClearUserData="false"  
  4.                 android:icon="@drawable/logo"  
  5.                 android:logo="@drawable/logo"  
  6.                 android:name="com.xx.xx"  
  7.                 android:hardwareAccelerated="false">  
复制代码
回复

使用道具 举报

0

主题

9

帖子

33

积分

新手上路

Rank: 1

积分
33
沙发
发表于 2015-6-1 17:03:10 | 只看该作者
我也来看看 html5 app
回复 支持 反对

使用道具 举报

0

主题

13

帖子

51

积分

注册会员

Rank: 2

积分
51
板凳
发表于 2015-6-1 18:25:36 | 只看该作者
非常好 开始学习html5 app开发了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2025-1-4 19:41 , Processed in 0.056164 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表