Белая вспышка между страницами с PhoneGap и jQuery Mobile для мобильного приложения

Question

При перемещении между страницами с помощью jQuery Mobile и PhoneGap на iPhone появляется раздражающая белая вспышка, которая отображается непосредственно перед загрузкой новой страницы. Простая ссылка, подобная этой, вызовет это:

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

Как я могу это исправить? Разумный обходной путь, возможно, заключался в том, чтобы заменить белую вспышку тем же цветом, что и цвет фона моей веб-страницы, но я также не знаю, возможно ли это.

Обновление:

Я использую PhoneGap 1.5.0 (он же Cordova), jQuery 1.6.4 и jQuery Mobile 1.0.1 на iPhone IOS 5.1 и 5.2.

Проблема сохраняется на рабочем столе Safari (хотя и гораздо менее заметна). В Firefox проблем нет.

Обновление 2:

Перепрошивка определенно вызвана пометкой ссылки как rel = "external". К сожалению, я ссылаюсь на jQuery Mobile, так что это необходимо.

Answer 1

Сочетание 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 final.Флэш-память видна при ссылках на внешние страницы, т. Е. Не используется многостраничная , но флеш-проблема только в том случае, если страница, на которую вы ссылаетесь, сложная (большая) и занимает некоторое время.оказывать.В этих случаях поддержание согласованного фона делает работу пользователя вполне приемлемой.

Удаление эффектов перехода страницы также сведет к минимуму прерывание путем включения следующего javacript перед включением мобильной библиотеки jquery.

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

Answer 2

Это работает для Cordova 3 и Cordova 2.9

Так что, как уже упоминалось выше, после того, как вы установили цвет фона вашего приложения с помощью CSS следующим образом:

 body{
   background-color: #000;
 }

Перейдите к вашему CordovaXlib.xcode.найдите и найдите свою папку «Classes» MainViewController.m line # 142

Раскомментируйте метод или функцию «webViewDidStartLoad» и просто добавьте

  self.webView.opaque=NO;

Таким образом, у вас будет что-то вроде этого:

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

Answer 3

Это исправило проблему в Android для jQm 1.4.2 вместе с остальными ответами, которые сегодня вечером будут тестироваться на iPhone ...

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

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

Было бы замечательно, если бы вы сказали нам, какая версия jQM и какая версия PhoneGap делают это для вас. Я полагаю, из ваших тегов вы испытываете это на iOS, какая версия iOS, хотя?

попробуйте установить следующее свойство CSS

-webkit-backface-visibility: hidden;

и дайте мне знать, если это поможет.

Это правило CSS сопровождается предупреждением. Это вызвало проблемы для меня в Картах Google и с формами. Используйте его экономно и только в том случае, если он вам действительно нужен.