Question

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

<a href="user.html" rel="external" data-role="button">User details</a>

我该如何解决这个问题？一个合理的解决方法可能是将白色闪光灯更改为与我的网页背景颜色相同的颜色，但我不知道这是否可行。

更新

我在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多重，所以这是必要的。

Answer 1

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"
});

Answer 2

这适用于Cordova 3和Cordova 2.9

如上所述，您通过CSS设置应用程序的背景颜色如下：

 body{
   background-color: #000;
 }

转到您的CordovaXlib.xcode.proj并查找您的＆＃34; Classes＆＃34;夹 MainViewController.m 线＃142

取消注释＆＃34; webViewDidStartLoad＆＃34;方法或功能，只需添加

  self.webView.opaque=NO;

所以你会有这样的事情：

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

Answer 3

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

尝试设置以下CSS属性

-webkit-backface-visibility: hidden;

如果有帮助请告诉我。

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

Answer 4

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

要淡化网络视图，请添加：

- (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，甚至更短。

你可以使用黑色背景。

Answer 5

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

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

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

5 个答案: