PhoneGap和jQuery Mobile移动应用程序中页面之间的白色闪烁问题

Question

使用jQuery Mobile和PhoneGap在iPhone上切换页面时，会出现令人烦恼的白色闪烁，在新页面加载之前会显示。像这样一个简单的链接就会导致这种情况：

<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多页，因此这是必要的。

- Jack

---

你使用的Phonegap和jquerymobile版本是什么？ - coderslay

你尝试过使用JQM 1.1.0吗？我认为这是正在解决的问题之一。http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/ - Jack

我已经尝试了1.1.0版本和夜间构建版本，感谢@Jack的帮助，但问题仍未解决。夜间构建版本是最糟糕的一个;-) - Jack

Answer 1

jQuery Mobile 1.1.0 RC2（刚刚发布）和jQuery 1.7.1的组合不会遇到这个问题！太好了。jQuery Mobile团队做得很棒。我知道这个错误一直困扰着他们！

更新:

如果您仍然看到闪烁，可以通过在CSS中提供一个常见的body背景颜色来大大改善用户体验。例如，如果您使用暗色主题，则将此添加到主题的CSS中将把“白色”闪烁变为“黑色”闪烁：

body{
   background-color: black !important
}

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

我刚刚更新到qQuery Mobile 1.1.0 final版本。当链接到外部页面时，即不使用多页时，闪存是可见的，但是只有在您链接到的页面复杂（大）且需要一段时间才能呈现时，闪存才是一个问题。在这些情况下，保持一致的背景使用户体验相当好。

通过在包含jquery mobile库之前包含以下javascript，可以消除页面转换效果，从而将中断最小化。

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

- Jack

---

这对于在iOS上使用Phonegap 3.4和JQuery Mobile 1.4.2非常有帮助。 - Nina Morena

Answer 2

这适用于Cordova 3和Cordova 2.9。因此，如上所述，在通过CSS设置应用程序的背景颜色之后，像这样：

 body{
   background-color: #000;
 }

请前往你的CordovaXlib.xcode.proj文件，找到"Classes"文件夹，进入MainViewController.m文件，定位到第142行。

取消注释"webViewDidStartLoad"方法或函数并添加以下内容。

  self.webView.opaque=NO;

所以你会得到类似这样的东西：

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

- d1jhoni1b

Answer 3

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

而且你可以使用黑色背景。

- PhilippeT

---

非常感谢你，Philippe。考虑到我正在使用PhoneGap进行xCode项目，我应该把这段代码放在哪里？再次感谢你的帮助。 - Jack

我更新了我的回答，希望你能找到你需要的，JacobusR。 - PhilippeT

Answer 4

这个解决了Android上jQm 1.4.2的问题，还有其他答案，今晚会在iPhone上进行测试...

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

- Josh

Answer 5

如果您能告诉我们您使用的jQM版本和PhoneGap版本，那就太好了。我从您的标签中推断出您在iOS上遇到了这个问题，但是您使用的是哪个版本的iOS呢？

尝试设置以下CSS属性

-webkit-backface-visibility: hidden;

并且让我知道它是否有帮助。

不过，这个 CSS 规则需要注意。在谷歌地图和表单中，它曾给我带来了问题。请节俭使用，并仅在您确实需要时使用它。

- darryn.ten

---

谢谢，但我无法让它工作。整个屏幕会在一瞬间闪白。那么我应该将样式应用于哪个元素？ - Jack

很不幸，它仍然无法正常工作。但是感谢您的帮助。这与rel="external"有关。不幸的是，如果我省略rel="external"，那么在页面之间来回导航时，jQuery Mobile会混淆。 - Jack