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

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

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

ОТВЕТЫ

Ответ 1

На белом экране вы говорите о результатах этого класса, объявленного в 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 завершен.

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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

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

Добавьте этот код в любой внутренний или внешний файл js.