Opóźnienie ekranu internetowego aplikacji iPhone opóźnienie:

Question

Zbudowałem aplikację internetową na iPhone'a i wykonałem wszystkie czynności, aby wyglądać jak natywna aplikacja: ikona aplikacji, zapobieganie przewijaniu, zapobieganie zaznaczaniu, używanie metod js opartych na dotykach itp. Jednak z ekranem powitalnym mam ciężki czas.

Próbowałem już PNG 320x460 i JPEG, buforowane z pliku manifestu. Obraz powitalny pojawia się, ale dopiero po kilku sekundach po uruchomieniu aplikacji z białym ekranem. Tak naprawdę ekran powitalny pojawia się tylko ułamek sekundy przed uruchomieniem aplikacji.

Nie mogę zrozumieć, dlaczego nie jest natychmiast ładowany splash. Wiem, że jest buforowany przez manifest, ponieważ ładuje się bez połączenia z Internetem. Czytałem wcześniej, że splash nie pojawia się, dopóki DOM nie jest gotowy, więc domyślam się, że to jest problem, ale nie wiem jak to naprawić.

Answer 1

Czy wstawiasz go za pomocą łącza startowego?

<link rel="apple-touch-startup-image" href="startup-graphic.png" /> 

ja również, że czasami, kiedy wprowadził zmiany do mojego iPhone aplikacji internetowych miałem całkowicie usunąć link na domowym ekranie i przejść przez proces dodawania go ponownie przed niektóre z elementów prawidłowo aktualizowana - nawet po zaktualizowaniu manifestu pamięci podręcznej.

Answer 2

Jeśli używasz Sencha Touch, znalazłem problem z tym związany. Aby wypróbować i wyliczyć rozmiar ekranu, dodali 2 duże opóźnienia 500ms. To dodaje dodatkową sekundę do czasu ładowania.

Udało mi się zredukować czas do 50 ms na iPhonie. Nie jestem pewien, jak dobrze kod działa, ale działa dla mnie.

if (Ext.is.iOS && Ext.is.Phone) { 
    Ext.Viewport.init = function(fn, scope) { 
     var me = this, 
      stretchSize = Math.max(window.innerHeight, window.innerWidth) * 2, 
      body = Ext.getBody(); 

     me.updateOrientation(); 

     this.initialHeight = window.innerHeight; 
     this.initialOrientation = this.orientation; 

     body.setHeight(stretchSize); 

     Ext.defer(function() { 
      me.scrollToTop(); 
      if (fn) { 
       fn.apply(scope || window); 
      } 
      me.updateBodySize(); 
     }, 50); 
    }; 
} 

Kod po pierwsze sprawdza, czy korzystamy z iPhone'a. W ten sposób zmieniłem tylko funkcjonalność iPhone'a. Nie mam dostępu do żadnych innych urządzeń do przetestowania.

Sądzę, że nawet to można zrobić lepiej. Na przykład w trybie autonomicznym na iPhonie wiemy dokładnie, jak wysoko znajduje się ekran.

To będzie na razie.

Mam nadzieję, że to pomoże.

Answer 3

Spowoduje to dodanie ekranu powitalnego do aplikacji sieci Web. Poniżej znajdują się rozmiary potrzebne zarówno dla iPada, iPhone'a i iPoda Touch, jak również dla paska stanu.

iPad Landscape - 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" /> 

iPad Portret - 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" /> 

iPhone/iPod Touch pionowa - 320 x 480 (rozdzielczość standardowa)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" /> 

iPhone/iPod Touch Portrait - 640 x 960 pikseli (wyświetlacz Retina o wysokiej rozdzielczości)

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" /> 

W przypadku tworzenia aplikacji sieci Web zgodnej z iPadem zaleca się stosowanie zarówno rozmiarów poziomych, jak i pionowych.

EDIT: Również, trzeba wyczyścić pamięć podręczną i zmień nazwę pliku (przykładowo z image.png do new_image.png) tak, że urządzenie będzie ładować nową poprawną] [obraz. Po pierwszym uruchomieniu aplikacji internetowej nie wyświetli się ekran powitalny, a może nawet drugi, w zależności od tego, czy dasz mu wystarczająco dużo czasu na załadowanie wszystkich wymaganych plików do pamięci urządzenia.