如何删除出现在启动屏幕和 iOS 上 HTML5 Web 应用程序首页之间的白页答案

【问题标题】：How to remove white page that appears between splash screen and first page on HTML5 web app on iOS如何删除出现在启动屏幕和 iOS 上 HTML5 Web 应用程序首页之间的白页
【发布时间】：2013-08-30 00:10:24
【问题描述】：

我们在www.tekiki.com 有一个 HTML5 应用程序。在 iPhone 4s 的初始屏幕和第一页之间会出现一个白页，我们不知道如何删除它。白页只出现在 iPhone 上，而不是桌面上。

我们尝试将元素的背景设置为不同的颜色，但没有任何区别。我们考虑过以编程方式显示启动画面而不是依赖元标记，但我们更喜欢元标记方法，因为它会自动为 iPhone 5 等更高的设备显示不同的启动画面。

谁能帮忙？

在理想情况下，白页的背景颜色为-webkit-linear-gradient(top,#e8e4dc,#f2f0eb)。

谢谢！

【问题讨论】：

这可能和stackoverflow.com/questions/18489909/…是同一个问题吗？
听起来像 FOUC（无样式内容的 Flash）。见paulirish.com/2009/avoiding-the-fouc-v3
我同意@RoyTinker。你可以在 dom 准备好之前预加载内容吗？
谢谢，@RoyTinker，但您能否发布答案并具体说明我们应该做什么（以防未来的读者无法加载链接）？
@Crashalot - 抱歉，我没有时间。我现在能做的就是开车路过:)

标签： iphone ios html ios5

【解决方案1】：

据我了解，您有在 AppStart 上加载 HTML 的 WebView。这似乎需要一些时间，并且您会在启动画面之后看到空的 WebView 一段时间。这是白色背景。

要解决这个问题，你可以做一些事情

在 WebView 加载内容时显示一些加载屏幕，并在网页完全加载后隐藏。
您也可以暂时隐藏 WebView，但在这种情况下，您需要在加载时使用自己的启动画面。

希望这会有所帮助。

【讨论】：

这是一个纯网络应用，不涉及网络视图。

【解决方案2】：

“仅在 iPhone 上显示”是指在网站保存到主屏幕后显示白页，还是在将其保存到主屏幕之前仅在 Mobile Safari 中显示？

如果您指的是后者，则只有在将网站添加到主屏幕后才会显示启动图像。因此，白屏只是页面渲染时的过渡。 coliff 提出的建议肯定有助于缓解这种情况；请参阅下面的更新。

如果您指的是前者，我只是将网站添加到我的 iPhone 4S 的主屏幕上，并且没有任何关于白页的问题；）也就是说，有一个非常短暂的闪光从启动图像过渡到第一页时出现白色。如果您希望在启动图像和首页之间有一个更平滑的过渡，那么 coliff 提出的建议也会有所帮助——在 iOS 7 上应该是平滑淡出，在 iOS 6 上应该是硬过渡。

更新

另外，请尝试制作类似于以下内容的测试页。将其保存到主屏幕后，在启动图像之后您不应该看到白页或闪光灯（我提到过）。这表明该问题肯定与渲染时间有关，如果不是完全由它引起的话。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tekiki</title>

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <!-- iPhone 4 Retina -->
    <link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='/images/dandy/apple-touch-startup-image-640x920.png'>
</head>
<body>
    <h1>PAGE LOADED!</h1>
</body>
</html>

所以，还有一些优化网页应用主页的建议：

缩小主页上的 inline CSS 和 JavaScript，其中有很多——不仅仅是外部文件！您甚至可以缩小 HTML。仅此一项所节省的费用就可能超过其他一切。
根据PageSpeed for Chrome，主页上的图片实际上可以减少63.4KB（减少26%，这似乎比之前提到的19%要好）； PageSpeed 甚至可以为您生成优化的图像。
根据this site，您没有使用 gzip 压缩资源，最多可以节省 21.93KB (74.42%)。

【讨论】：

【解决方案3】：

我已经查看了您的网站，并提出了一些提高性能的建议，这些建议肯定会减少在 iPhone 上呈现页面的延迟。

优化您的所有图像（如果您使用的是 PC，请使用 PNGGauntlet）。这将使主页上的图像大小减少 76 KB（减少 19%）。优化图片是无损的，因此图片看起来相同，但加载速度更快
考虑将 JavaScript 移到页面底部。这是目前页面渲染的一大瓶颈。
缩小 JavaScript 文件 - 将节省 36 KB（减少 28%）
缩小 CSS 以节省 3 KB（减少 24%）
为您的图片、CSS 和 JS 设置过期日期以启用缓存，以便在第二次加载时更快
没什么大不了的，但要更新使用 jQuery 1.10.2（而不是 1.10.1）

更新：我看到有 JS 检测到 iPhone 并重定向到 http://www.tekiki.com/dandy/dandy/。上面的许多建议仍然存在，但我注意到一件事 - 你使用的启动画面非常大。 iPhone 5 是 223 KB，加载速度不快。尝试导出为 JPEG 或 256 色 PNG 以减小大小。尽可能压缩和缩小一切以优化性能。

【讨论】：

谢谢，太好了。消除白页的任何建议（仅在从 iPhone 查看应用程序时出现）？是的，我们这个周末会更新网页版到 1.10.2，忘记了，谢谢！

【解决方案4】：

您必须将 webview 的所有子视图和 webview 本身设置为不透明且具有清晰的背景颜色。

for (UIView *subview in [myWebView subviews]) {
    [subview setOpaque:NO];
    [subview setBackgroundColor:[UIColor clearColor]];
}
[myWebView setBackgroundColor:[UIColor clearColor]];
[myWebView setOpaque:NO];

那么你的html代码应该有这个

<body style="background-color: transparent;">

最后，根据需要设置 webview 的 superview 的背景。

【讨论】：

这是一个 HTML5 应用程序，不是原生的……直接通过 safari/chrome 访问。没有网络浏览量可言。
对不起，HTML5 app 的错误解释（基于网络的应用程序）