用于移动应用程序的 PhoneGap 和 jQuery Mobile 页面之间的白色闪烁 [英] White flash between pages with PhoneGap and jQuery Mobile for mobile app
问题描述
在 iPhone 上使用 jQuery Mobile 和 PhoneGap 在页面之间导航时，会在新页面加载之前显示令人讨厌的白色闪光.像这样的简单链接会导致:
When navigating between pages using jQuery Mobile and PhoneGap on iPhone, there is an annoying white flash that displays just before the new page loads. A simple link like this will cause this:
<a href="user.html" rel="external" data-role="button">User details</a>
我该如何解决这个问题?一个合理的解决方法可能是将白色闪光更改为与我的网页背景颜色相同的颜色，但我也不知道这是否可行.
How can I fix this? A reasonable workaround may have been to change the white flash to the same color as my web page background color, but I don't know if this is possible either.
更新:
我在 iPhone IOS 5.1 和 5.2 上使用 PhoneGap 1.5.0(又名 Cordova)、jQuery 1.6.4 和 jQuery Mobile 1.0.1.
I'm using PhoneGap 1.5.0 (aka Cordova), jQuery 1.6.4 and jQuery Mobile 1.0.1 on iPhone IOS 5.1 and 5.2.
该问题似乎在 Safari 桌面中仍然存在(尽管不那么明显).在 Firefox 上没有问题.
The problem appears to persist in Safari desktop (although much less visible). There is no problem on Firefox.
更新 2:
闪烁肯定是链接标记为rel="external"引起的.不幸的是，我链接到 jQuery Mobile 多页，所以这是必要的.
The flashing is definitely caused by marking the link as rel="external". Unfortunately I am linking to jQuery Mobile multipages, so this is necessary.
推荐答案
jQuery Mobile 1.1.0 RC2(刚刚发布)和 jQuery 1.7.1 的组合没有遇到这个问题！！！精彩的.jQuery Mobile 团队的出色工作.我知道这个错误一直困扰着他们！
A combination of jQuery Mobile 1.1.0 RC2 (just released) and jQuery 1.7.1 does not suffer from this problem!!! Wonderful. Great work from the jQuery Mobile team. I know this bug was haunting them!
更新:
如果您仍然看到闪光，您可以通过在 CSS 中提供通用的正文背景颜色来显着改善用户体验.例如，如果您使用的是深色主题，那么将其添加到您主题的 CSS 中会将白色"闪光更改为黑色"闪光:
If you still see a flash, you can drastically improve the user experience by supplying a common body background color in your CSS. For example, if you are using a dark theme, then adding this to your theme's CSS will change the 'white' flash to a 'black' flash:
body{
background-color: black !important
}
此外，如果您可以在链接中不使用 rel="external" 就离开，那么 Flash 也会消失.不幸的是，根据您的设计，这可能会破坏您的导航.
Also, if you could get away without using rel="external" in your links, then the flash will be gone also. Unfortunately, depending on your design, this will possibly screw up your navigation.
我刚刚更新到 qQuery Mobile 1.1.0 最终版.链接到外部页面时，Flash 是可见的，即不使用多页，但是只有当您链接到的页面很复杂(大)并且需要一段时间来渲染.在这些情况下，保持一致的背景会让用户体验非常好.
I just updated to qQuery Mobile 1.1.0 final. The flash is visible when linking to external pages, i.e. not using multipage, but the flash is only a problem if the page you are linking to is complex (large) and takes a while to render. In those cases, keeping a consistent background makes the user experience quite alright.
通过在包含 jquery 移动库之前包含以下 javacript，移除页面转换效果也将保持最小化中断.
Removing the page transition effects will also keep the interruption to a minimum by including the following javacript before including the jquery mobile library.
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition="none"
});
这篇关于用于移动应用程序的 PhoneGap 和 jQuery Mobile 页面之间的白色闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
