带有PhoneGap和jQuery Mobile移动应用程序的页面之间的白色闪烁

在iPhone上使用jQuery Mobile和PhoneGap在页面之间导航时,会在新页面加载之前显示恼人的白色闪光。 像这样的简单链接会导致:

User details 

我怎样才能解决这个问题? 一个合理的解决方法可能是将白色闪光灯改为与我的网页背景颜色相同的颜色,但我不知道这是否可行。

更新:

我在iPhone IOS 5.1和5.2上使用PhoneGap 1.5.0(又名Cordova),jQuery 1.6.4和jQuery Mobile 1.0.1。

这个问题似乎在Safari桌面上持续存在(虽然不那么明显)。 Firefox上没有问题。

更新2:

闪烁肯定是通过将​​链接标记为rel =“external”引起的。 不幸的是我链接到jQuery Mobile多重,所以这是必要的。

jQuery Mobile 1.1.0 RC2(刚刚发布)和jQuery 1.7.1的组合不会遇到这个问题! 精彩。 来自jQuery Mobile团队的出色工作。 我知道这个bug正困扰着他们!

更新:

如果您仍然看到闪光灯,则可以通过在CSS中提供常见的机身背景颜色来大幅改善用户体验。 例如,如果您使用的是黑暗主题,那么将其添加到主题的CSS中会将“白色”闪光灯更改为“黑色”闪光:

 body{ background-color: black !important } 

此外,如果您可以在链接中不使用rel =“external”而离开,那么闪存也将消失。 不幸的是,根据您的设计,这可能会搞砸您的导航。

我刚刚更新到qQuery Mobile 1.1.0 final。 链接到外部页面时闪存是可见的,即不使用多页, 如果您链接的页面很复杂(大)并且需要一段时间来渲染,则闪存只是一个问题。 在这些情况下,保持一致的背景使用户体验非常好。

删除页面转换效果还可以通过在包含jquery移动库之前包含以下javacript来将中断降至最低。

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

这适用于Cordova 3和Cordova 2.9

如上所述,在您通过CSS设置应用程序的背景颜色后,如下所示:

  body{ background-color: #000; } 

转到您的CordovaXlib.xcode.proj并查找“Classes”文件夹MainViewController.m第#142行

取消注释“webViewDidStartLoad”方法或function,然后添加

  self.webView.opaque=NO; 

所以你会有这样的事情:

  - (void) webViewDidStartLoad:(UIWebView*)theWebView { self.webView.opaque=NO; return [super webViewDidStartLoad:theWebView]; } 

如果你能告诉我们哪个版本的jQM以及哪个版本的PhoneGap为你做这件事会很棒。 我假设你的标签在iOS上遇到过这个版本的iOS版本吗?

尝试设置以下CSS属性

 -webkit-backface-visibility: hidden; 

并告诉我它是否有帮助。

虽然这个CSS规则带有警告。 它在Google地图和Forms上给我带来了问题。 谨慎使用它,只有在你真的需要时才使用它。

在Xcode项目左侧面板中,打开’Classes’文件夹,然后打开’AppDelegate.m’文件。 您将找到webViewDidStartLoad和webViewDidStartLoad方法的代码。

要淡出Web视图,请添加:

 - (void)webViewDidStartLoad:(UIWebView *)theWebView { self.webView.alpha = 0.0f; [super webViewDidStartLoad:theWebView]; // add this line to your code } 

然后减轻,在方法结束时添加一个动画:

 - (void)webViewDidStartLoad:(UIWebView *)theWebView { ... [super webViewDidFinishLoad:theWebView]; ... [UIView beginAnimations:@"fade" context:nil]; // add these 3 lines to your code self.webView.alpha = 1.0f; [UIView commitAnimations]; } 

‘1.0’参数以秒为单位。 您可以将其缩短到0.5f,甚至更短。

你可以使用黑色背景。

这解决了Android中针对jQm 1.4.2的问题以及其余的这些答案,今晚将在iPhone上进行测试……