Как избавиться от нежелательных артифактов при запуске phonegap приложения?

Question

[Тимур Евгажуков]

Создал мобильное приложение на jquery mobile и с использованием phonegap, все работает замечательно, единственно, при запуске приложения на экране отображается корявый html буквально на доли секунды, а после (видимо догружаются стили) все приходит в норму. Все страницы в одном файле.
Как избавиться от этого неприятного артефакта?

Answer 1

[idclev31]

Вы можете выводить, например, лого на весь экран, на время загрузки стилей.
Тогда, верстки без css видно не будет.

Comments

[Тимур Евгажуков]

Тоже думаю так сделать, но возможно имеется более хорошее решение такой проблемы. Вот и задал тут вопрос.

Answer 2

[Forsaider]

Сделать обычный прелоадер. Средствами того же jquery.

Answer 3

[Тимур Евгажуков]

Что я сделал:
1. Сразу после тега body добавил блок прелоаедера
2. В header добавил стили к нему
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 100500;
}

#page-preloader .spinner {
width: 192px;
height: 192px;
position: absolute;
left: 50%;
top: 50%;
background: url('img/logo.png') no-repeat 50% 50%;
margin: -96px 0 0 -96px;
}
3. И обработчик события полной загрузки страницы
$(window).on('load', function () {
var $preloader = $('#page-preloader'), $spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});

Comments

[Forsaider]

Всё верно)