使用PhoneGap和jQuery Mobile進行移動應用的頁面之間的白色閃光

在iPhone上使用jQuery Mobile和PhoneGap在頁面之間導航時，會在新頁面加載之前顯示令人討厭的白色閃光。像這樣的簡單鏈接將導致：使用PhoneGap和jQuery Mobile進行移動應用的頁面之間的白色閃光

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

我該如何解決這個問題？一個合理的解決方法可能是將白色閃光更改爲與我的網頁背景顏色相同的顏色，但我不知道這是否可行。

更新：

我使用PhoneGap的1.5.0（又名科爾多瓦），jQuery的1.6.4和jQuery移動1.0.1的iPhone IOS 5.1和5.2。

該問題似乎在Safari桌面上持續存在（儘管不太明顯）。 Firefox沒有問題。

更新2：

閃爍的絕對通過標記鏈接作爲相對= 「外部」引起的。不幸的是，我鏈接到jQuery Mobile multipages，所以這是必要的。

來源

2012-04-02 Jack

什麼版本的Phonegap和jquerymobile你使用？ – 2012-04-02 11:29:22

你用JQM 1.1.0試過了嗎？我認爲這是正在工作的問題之一http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/ – Jack 2012-04-04 21:40:56

我試過1.1。 0和每晚構建，謝謝@Jack，但問題仍未解決。每晚的建設是最糟糕的;-) – Jack 2012-04-05 11:35:47

jQuery Mobile 1.1.0 RC2（剛剛發佈）和jQuery 1.7.1的組合不會遇到這個問題！精彩。來自jQuery Mobile團隊的出色工作。我知道這個錯誤令他們困擾！

UPDATE：

如果仍然看到了閃光燈，可以大大改善你的CSS提供共同的主體背景色的用戶體驗。例如，如果您使用的是黑暗的主題，然後添加這對你的主題CSS將「白」閃光更改爲「黑色」閃：

body{ 
    background-color: black !important 
}

另外，如果你可以逃脫不使用rel = 「外部」在你的鏈接，那麼閃光燈也將消失。不幸的是，這取決於你的設計，這可能會導致你的導航。

我剛更新到qQuery Mobile 1.1.0 final。當鏈接到外部頁面時，即閃存是可見的，即不使用多頁，但是如果您鏈接的頁面複雜（大）並且需要一段時間來渲染，則閃存只是一個問題。在這些情況下，保持一致的背景使得用戶體驗相當好。

在包含jquery移動庫之前，通過包含以下javacript，刪除頁面轉換效果也將使中斷最小化。

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

來源

2012-04-13 14:44:10 Jack

這真的很有幫助，謝謝！ – santuxus 2013-06-19 09:53:38

這對iOS上的Phonegap 3.4和JQuery Mobile 1.4.2很有幫助。 – 2014-04-09 15:22:31

如果你能告訴我們哪個版本的jQM和哪個版本的PhoneGap爲你做這件事，那將是非常好的。我從你的標籤中假設你在iOS上經歷過這種情況，但是哪個版本的iOS？

嘗試設置下面的CSS屬性

-webkit-backface-visibility: hidden;

，讓我知道，如果有幫助。

這個CSS規則帶有一個警告字。它在Google地圖和Forms上對我造成了問題。謹慎地使用它，只有在你真的需要它的時候。

來源

2012-04-02 13:09:37

謝謝，但我不能得到它的工作。整個屏幕瞬間閃爍白色。那麼我應該使用哪種元素？ – Jack 2012-04-02 14:07:43

適用於*或body> * – 2012-04-02 14:13:43

不幸的是，它仍然無法正常工作。但是，謝謝你的幫助。它與rel =「external」有關。不幸的是，如果我忽略rel =「external」，那麼在頁面之間來回瀏覽時，jQuery Mobile會混淆。 – Jack 2012-04-02 15:01:50

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

而且您可能會使用黑色背景。

來源

2012-04-04 21:33:59 PhilippeT

非常感謝Philippe。考慮到我爲xCode項目使用PhoneGap，我應該在哪裏放置這些代碼？再次感謝您的幫助。 – Jack 2012-04-05 11:42:43

我更新了我的答案，希望你會找到你需要的，JacobusR – PhilippeT 2012-04-10 10:39:51

這是工作科爾多瓦3和科爾多瓦2.9

所以上面後提到您通過CSS設置你的應用程序的背景色是這樣的：

body{ 
    background-color: #000; 
}

轉到您的CordovaXlib.xcode。 proj並查找「Classes」文件夾 MainViewController.m line＃142

取消註釋「webViewDidStartLoad」方法o r功能，只是增加

self.webView.opaque=NO;

所以，你有這樣的事情：

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

來源

2014-05-08 03:18:03 d1jhoni1b

這個固定的問題在Android中的JQM 1.4.2這些答案的其餘一起，將成爲測試在iPhone今晚...

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

來源

2014-05-23 20:13:11 Josh

使用PhoneGap和jQuery Mobile進行移動應用的頁面之間的白色閃光

回答

相關問題