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

Ответ 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.