Biała strona podczas ładowania podczas korzystania z jQuery Mobile

Question

Używamy jQuery Mobile 1.3.2 do mobilnej aplikacji HTML5 pod numerem www.tekiki.com. (Sprawdź na iPhonie lub sprawdź na stronie www.tekiki.com/dandy/dandy).

Po załadowaniu JQM pokazuje białą stronę pomiędzy ekranem ładowania a pierwszą stroną aplikacji. Czy są jakieś ustawienia w JQM, aby tłumić ekran ładowania? Najbliżej znaleźliśmy $.mobile.loading(), ale dotyczy to tylko tekstu ładowania. Chcemy, aby zniknął cały biały ekran, co oznacza, że ​​aplikacja powinna przejść bezpośrednio z ekranu ładowania na pierwszą stronę.

Answer 1

biały ekran mówimy o wynikach tej klasy zadeklarowanej w JQM CSS:

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

Klasa dodaje kiedy JQM zaczyna initalize

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

i usuwane na najpierw pageshow.

Cała procedura jest konieczna, ponieważ w przeciwnym razie zobaczysz wstępnie zmodyfikowany język znaczników do momentu zakończenia renderowania JQM. Więc jeśli chcesz, aby „zdjąć” go, można zadeklarować:

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

ale można zobaczyć cały kod źródłowy zostanie dotknięta przez jQuery Mobile.

Obejścia wiem:

Dostawa wstępnie wzmocnione znaczników zamiast JQM robi
Jest to swego rodzaju próby przed JQM 1.4 (gdzie będziesz miał dużo mniej wygenerowane elementy i możliwość opowiedzenia JQM , które widżety są dostarczane wstępnie ulepszone), ale można tego dokonać, aczkolwiek wymaga to przepisywania widżetów.

Również z tego, co widzę w twoim kodzie, twoim problemem powinien być fakt, że obraz startowy systemu iOS znika, kiedy chce (= przed inicjalizacją JQM), a ty masz nad nim kontrolę i ukrywasz go po zakończeniu JQM.

Więc: Stosowanie niektórych innych środków coverup jak ekran zwyczaj uruchamiania
Na przykład robię this lub this. Obie aplikacje są ładowane za pomocą requireJS i używają niestandardowego skryptu startowego, który napisałem (po wyciągnięciu włosów z obrazów startowych iOS).

Oto jak to działa:

• dodać klasę splash do ciała. CSS:before pełne białe tło (... ładowanie)
• dodać opcjonalny obraz tła za pomocą CSS lub JavaScript (bez jQuery lub JQM, ponieważ musi uruchomić przed albo jest analizowany)
• usunąć splash na pageshow z organizmu. Ponieważ zawsze pozostajesz na pierwszej stronie, którą załadowałeś wcześniej (chyba że używasz rel="external", nie ustępuje, więc możesz bezpiecznie dodać tę klasę do wszystkich swoich stron i będzie ona tylko uruchamiać zamknięcie na pierwszej stronie, którą użytkownik ładuje.

Powoduje ukrycie dowolnego ekranu startowego, który ustawisz, gdy zrobisz JQM, więc nie będziesz miał białego ekranu, a także działa on w różnych przeglądarkach (w przeciwieństwie do obrazu startowego iOS) i może być z łatwością używany z różnymi rozmiarami obrazu (spróbuj drugiej aplikacji z różne urządzenia & portait/krajobraz).

Jeśli chcesz pełny kod przykładowy, daj mi znać.

Answer 2

myślę nieco więcej info tutaj ..

• są załadunku i strony docelowe częścią tego samego projektu?

• Czy możesz sprawić, że nie nastąpi pełne odświeżenie między ekranem ładowania a stroną docelową?

inne propozycje:

• gdy zarówno załadunek i wyładunek ekranu należą do tego samego projektu (domena), spróbuj wywołanie strony docelowej przy użyciu changePage (http://api.jquerymobile.com/jQuery.mobile.changePage/), z załadunkiem. W ten sposób ikona ładowania powinna się utrzymywać.

• możesz wskazać nową stronę docelową i sprawdzić, czy ten biały ekran się nie wyświetla. Być może coś jest nie tak z tą stroną docelową.

Answer 3

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

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

Dodaj ten kod do dowolnego wewnętrznego lub zewnętrznego pliku js.