Белая страница при загрузке при использовании jQuery Mobile

мы используем jQuery Mobile 1.3.2 для мобильного приложения HTML5 в www.tekiki.com. (Проверьте с iPhone или проверьте www.tekiki.com/dandy/dandy с рабочего стола.)

при загрузке JQM показывает белую страницу между экраном загрузки и первой страницей приложения. Есть ли настройки в JQM для подавления экрана загрузки? Ближе всего мы нашли $.mobile.loading(), но это относится только к тексту нагрузки. Мы хотим, чтобы весь белый экран исчез, то есть приложение должно идти непосредственно с экрана загрузки на первую страницу.

7
html5 iphone jquery jquery-mobile mobile-safari

3 ответов

на белом экране вы говорите о результатах этого класса, объявленных в JQM CSS:

/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }

класс добавляется, когда JQM начинает инициализировать

// Add mobile, initial load "rendering" classes to docEl
$html.addClass( "ui-mobile ui-mobile-rendering" );

и удалены на первом pageshow.

вся процедура необходима, потому что в противном случае вы увидите предварительно расширенную разметку, пока JQM не выполнит ее рендеринг. Поэтому, если вы хотите "удалить" его, вы можете объявить:

 .ui-mobile-rendering > * { visibility: visible; }

но вы увидите, что весь ваш исходный код тронутый jQuery Mobile.

обходные пути я знаю:

поставка предварительно расширенной разметки вместо JQM делает это
Это своего рода испытание перед jqm 1.4 (где у вас будет гораздо меньше сгенерированных элементов и возможность сообщить JQM, какие виджеты предоставляются предварительно улучшенными), но может быть сделано, хотя и требует некоторого перезаписи виджета.

также из того, что я вижу в вашем коде, ваша проблема должна быть в том, что iOS загрузочный образ исчезает, когда он хочет (=до инициализации JQM) против вас, имеющего контроль над ним и скрывающего его, когда JQM сделано.

Итак: используйте некоторые другие средства прикрытия, такие как пользовательский экран запуска
Например, я делаю этой или этой. Оба приложения загружаются requireJS и используют пользовательский скрипт запуска, который я написал (после вытаскивания моих волос с помощью изображений запуска iOS).

вот как это работает:

  • добавить класс splash в тело. CSS:before полный белый фон (...загрузка)
  • добавить дополнительное фоновое изображение через CSS или Javascript (без jQuery или JQM, потому что он должен работать до либо разбирается)
  • удалить splash на pageshow от тела. Как вы всегда остаетесь на странице, которую вы загрузили первым (если вы не используете rel="external" на body сохраняется, поэтому вы можете безопасно добавить класс на все свои страницы, и он будет только запустите coverup на первой странице, которую загружает пользователь.

это скрывает любой экран запуска вы установили, когда JQM сделано, так что вы не будете иметь белый экран. Кроме того, он работает в кросс-браузере (vs iOS startup image) и может легко использоваться с разными размерами изображений (попробуйте 2-е приложение с разными устройствами и portait/landscape).

если вы хотите полный образец кода, дайте мне знать.

10

Я думаю, немного больше информации здесь..

  • являются ли загрузочные и целевые страницы частью одного проекта?

  • можете ли вы сделать так, чтобы между загрузочным экраном и целевой страницей не происходило полного обновления?

другие предложения:

  • Если экран загрузки и посадки принадлежит одному проекту (домену), попробуйте вызвать целевую страницу с помощью changePage (http://api.jquerymobile.com/jQuery.mobile.changePage/), от загрузки. Таким образом, значок loading должен сохраняться.

  • вы можете указать на новую целевую страницу и посмотреть, не отображается ли этот белый экран. Возможно, что-то не так с этой целевой страницы.

1
$(function(){
    setTimeout(hideSplash, 2000);
});

$(function hideSplash() {
    $.mobile.changePage("*Jquery Mobile Page here*", {
        transition: "slidedown",
        reverse: false,
        changeHash: false
    });
});

добавьте следующий код на любой внутренний или внешний JS файл.

0