iPhone Web應用程序啓動畫面延遲

我已經構建了一個iPhone Web應用程序，並已完成所有步驟以使其看起來像本機應用程序：應用程序圖標，防止滾動，阻止選擇，使用基於觸摸的js方法等。不過，我在啓動屏幕上遇到困難。iPhone Web應用程序啓動畫面延遲

我試過了一個320x460 PNG和JPEG，與一個清單文件一起緩存。飛濺圖像確實會出現，但只有在應用程序啓動後幾秒鐘後纔會顯示白色屏幕。所以，真正的啓動畫面只會在應用程序啓動前幾秒鐘內顯示出來。

我不明白爲什麼它不立即加載飛濺。我知道它被清單緩存，因爲它沒有互聯網連接加載。我之前看過，在DOM準備好之前不會顯示出來，所以我猜這就是問題所在，但我不知道如何解決它。

2010-10-06 ryanashcraft

您是否將它與啓動鏈接一起插入？

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

我還發現，有時候，當我更改了我的iPhone web應用程序，我不得不徹底刪除主屏幕上的鏈接，並經過之前的一些適當的更新元素的重新加入的過程 - 即使在更新緩存清單後也是如此。

來源

2010-10-25 13:19:19 Trolleymusic

是的，我正在使用該代碼。而且我也注意到我必須在主屏幕上刪除應用程序並再次添加（除其他外）以獲取新版本的緩存。這個問題並不是什麼大問題 - 它只是一個令人困擾的贈品，它不是一個本地應用程序。 – ryanashcraft 2010-10-31 18:04:38

@ryanashcraft：只是不包括在啓動畫面中的應用程序版本號，並永遠不會改變它，那麼用戶永遠不會知道... – awe 2014-06-05 05:30:58

如果您使用Sencha Touch，我發現問題與此有關。爲了嘗試並制定出屏幕尺寸，他們添加了2個500毫秒的延遲。這爲加載時間增加了額外的一秒。

我已經設法將時間縮短到50ms。我不確定代碼的功能如何，但對我來說很有用。

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); 
    }; 
}

該代碼首先檢查我們是否在iPhone上。這樣我只改變了iPhone的功能。我無法訪問任何其他設備進行測試。

我認爲即使這樣做可以做得更好。例如在iPhone上的獨立模式下，我們知道屏幕有多高。

現在就做。

希望這會有所幫助。

來源

2011-04-06 12:05:12 jDempster

這將爲您的Web App添加一個閃屏。以下是iPad和iPhone/iPod Touch所需的尺寸，其中還包括狀態欄區域。

iPad的風景 - 1024×748

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

iPad的肖像 - 768 X 1004

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

iPhone/iPod Touch的肖像 - 320×480（標準分辨率）

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

iPhone/iPod Touch縱向 - 640 x 960像素（視網膜顯示高分辨率）

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

如果爲iPad兼容創建Web應用程序，建議使用橫向和縱向尺寸。

編輯另外，您需要清除緩存並重命名文件（例如，從image.png到new_image.png），以便設備將加載新的[正確]圖像。它不會在首次啓動Web應用程序時顯示啓動畫面，甚至可能不會顯示啓動畫面，具體取決於是否給它足夠的時間將所有必需的文件加載到設備的內存中。

來源

2012-03-10 07:00:36 adamdehaven

iPhone Web應用程序啓動畫面延遲

回答

相關問題