iPhone 网页应用启动画面延迟

Question

我已经开发了一个iPhone网页应用程序，并完成了所有步骤，使其看起来像一个本地应用程序：应用图标、防止滚动、禁止选择、使用基于触摸的js方法等。然而，我在闪屏界面方面遇到了一些困难。

我尝试了320x460 PNG和JPEG格式的图片，并通过清单文件进行了缓存。闪屏图片确实出现了，但只有在应用程序启动后几秒钟才会出现一个白色屏幕。因此，真正的闪屏界面仅在应用程序完成启动之前的瞬间显示出来。

我无法弄清楚为什么它不能立即加载闪屏。我知道它被清单缓存了，因为它可以在没有互联网连接的情况下加载。我之前读过，闪屏直到DOM准备好才会显示出来，所以我猜那就是问题所在，但我不知道该如何解决。

- ryanashcraft

Answer 1

你是否使用启动链接进行插入？

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

我发现有时候我在修改iPhone网页应用程序时，必须完全删除主屏幕上的链接，并重新添加它，才能使一些元素正确更新 - 即使更新了缓存清单。

- Trolleymusic

---

是的，我正在使用那段代码。我还注意到我必须从主屏幕上删除应用程序并重新添加它（以及其他一些操作）才能使新版本被缓存。问题并不是很大——只是一个令人烦恼的提示，表明这不是原生应用程序。 - ryanashcraft

@ryanashcraft：在启动画面中不要包含应用程序版本号，也永远不要更改它，这样用户就永远不会知道... - awe

Answer 2

这将为您的Web应用程序添加启动画面。以下是iPad和iPhone / iPod Touch所需的尺寸，包括状态栏区域。

iPad横屏 - 1024 x 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 x 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应用程序时不会显示闪屏，甚至可能第二次也不会，这取决于您是否给它足够的时间将所有所需文件加载到设备的内存中。

- adamdehaven

Answer 3

如果您正在使用Sencha Touch，我发现问题与此相关。为了尝试计算屏幕大小，他们添加了两个500毫秒的延迟。这会使加载时间增加一秒钟。

我已经成功将iPhone上的时间缩短到50毫秒。我不确定代码的功能如何，但对我来说有效。

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上的独立模式中，我们知道屏幕的高度。

目前来说，这就够了。

希望这可以帮到你。

- jDempster