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应用程序启动画面延迟

回答

相关问题