使用PhoneGap和移动应用程序jQuery Mobile在页面之间闪烁白色

在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"引起的。不幸的是，我正在链接到jQueryMobile多页，所以这是必要的。

jQuery Mobile 1.1.0 RC2（刚刚发布）和jQuery 1.7.1的组合没有遇到这个问题！！！精彩的jQuery Mobile团队做得很好。我知道这个虫子一直困扰着他们！

更新：

如果你仍然看到一个闪光灯，你可以通过在CSS中提供一个通用的主体背景颜色来大幅改善用户体验。例如，如果你使用的是深色主题，那么将其添加到主题的CSS中会将"白色"闪光灯更改为"黑色"闪光灯：

body{
   background-color: black !important
}

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

我刚刚更新到qQuery Mobile 1.1.0最终版本。当链接到外部页面时，闪光灯是可见的，即不使用多页，但只有当链接到的页面复杂（大）并且需要一段时间才能渲染时，闪光灯才是问题。在这些情况下，保持一致的背景可以让用户体验良好。

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

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

这适用于Cordova 3和Cordova 2.9

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

 body{
   background-color: #000;
 }

转到您的CordovaXlib.xcode.proj并查找您的"Classes"文件夹MainViewController.m142号线

取消注释"webViewDidStartLoad"方法或函数，只添加

  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规则附带了一个警告词。它给我在谷歌地图和表单上带来了问题。谨慎使用，只有在你真正需要的时候才使用。

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

要淡出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上测试。。。

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

相关内容

最新更新

热门标签：