Question

我有一个非常简单的HTML5 iPhone网络应用程序，几乎完美无缺;只有一个问题：在启动图像和应用程序主屏幕之间，出现一个完全白色的屏幕（即闪烁）大约一秒钟。

我正在使用“添加到主屏幕”按钮从网上下载应用程序到我的手机。 javascript文件（functions.js）和样式表都是非常小的文件。

有人有这个问题吗？有没有办法解决/修复它？

的index.html

<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon@2x.png" />
<link rel="apple-touch-startup-image" href="Default@2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

<body>
    <div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>

demo.manifest

CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css

的.htaccess

AddType text/cache-manifest .manifest

编辑＃1 ：我做了更多的研究并发现this answer：

由于HTML的渐进特性，在渲染时清除屏幕和其他工件是HTML渲染的常见问题。这个概念是浏览器应尽可能早地绘制，并在样式/脚本/内容可用时呈现它们。标记可能存在一个问题，即所有渲染都会延迟，直到某些内容或脚本可用。如果出现以下情况，可能会发生这种情况：


您有基于图像尺寸的动态高度，但您没有   在标记或CSS中设置图像尺寸。

您的布局基于表格，并且您没有在CSS中使用“table-layout：fixed”。

您的HTML使用带有document.write（）的内联脚本。

您有某种onLoad（）函数可以显示/修改内容。

您链接到外部样式表。

您正在使用不可缓存的外部内容，或者您已禁用缓存。

您使用的是返回404或无法离线使用的外部内容。

我已经按照这个答案中的所有建议，但它没有摆脱我的网络应用程序的白色闪烁。是否有任何黑客可以解决这个问题？

编辑＃2 ：我尝试过不使用Javascript和仅使用样式表：

body { background-color: black }

但仍有白色闪烁。由于这似乎是所有这类Web应用程序的问题，我的问题是：是否有任何黑客可以解决这个问题？

Answer 1

CSS选择器在iOS上相当慢（贪婪的CSS重置脚本也有可怕的性能）。

头部启动的javascript自加载DOM-ready脚本和CSS选择器一起运行使问题进一步复杂化。由于头部有CSS和javascript请求，因此处理身体时会有一个很小但很明显的延迟，特别是身体的背景颜色。

大多数HTML5框架正在转向延迟脚本加载。作为一个minmum，你想首先加载样式表，然后担心javascript。尝试将css at the top和脚本放在底部，然后内联默认背景颜色（不是图像 - iOS 5渲染缩放后的背景图像和CSS渐变会有明显的延迟）。

您也可以尝试iOS5+上的async属性，但我自己没有尝试过。

希望这会有所帮助：）

Answer 2

好吧，好像是个基本烦人的问题。我认为解决这个问题的最佳方法是通过AJAX（异步JavaScript和XML）。我相信你可能已经知道这是什么了，但它只是一种基本上从JavaScript发送文件到其他地方的文件的方法，然后将其加载到页面中或者根据你的意愿解析它。

更先进的方法

对于您的示例，我建议您注释掉具有如下背景图像的CSS行：

.bg-container {
    /* background-image: url(img/bg.png); /* commented out */
}

请注意，第二条注释只是在调试代码时更容易注释和取消注释一行。

现在只需在您的身体上添加一个简单的img标签，并将它的src设为ajax加载器（您可以在任何地方找到旋转轮生成器）。从这里你可以编写一些JavaScript来加载图像，摆脱微调器，然后替换它。

两种更简单的方法

这个解决方案对我没有吸引力，我认为大多数人都不会喜欢它。这就是为什么我使用'Bootloader.js'这是我几个月前写的一个小AJAX加载工具来帮助解决这类问题的人。

它易于使用，除了脚本包含之外，只需添加此元标记：

<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">

表单和锚点是可选的，如果您使用它，它将使您的所有表单和链接异步（不适用于跨域使用尚未）。表格不易设置，如果您愿意，可以阅读相关文档。

最后，像这样设置你的身体：

<body>
    <div id="body">
        <!-- All the content should go here -->
    </div>

    <!-- This will disappear on first ajax load -->
</body>

你有它，这将为你处理一切。

最后的建议

如果您不喜欢这些选项，或者想要一个有限但可自定义的选项，我建议您使用Mika Tuupola的Image LazyLoader（包含在Bootloader.js中），也可以在http://www.appelsiini.net/projects/lazyload

告诉我它是怎么回事，以及你用的是什么！ XD

Answer 3

即使是简单的网站也会出现此问题。

例如：显示一个背景为#ccc的网站，其iPhone 7的启动画面为#ccc。

<!doctype html>
<html style="background-color: #ccc;">
<head>
  <title>iOS web app</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="iOS web app">
  <meta name="viewport" content="initial-scale=1">
  <link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
                 and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
  <h1>iOS web app</h1>
</body>
</html>

https://imgur.com/a/tGiREVM

在加载应用程序时，您会看到白色闪烁。

使用白色闪光灯，快速加载的应用程序感觉更糟，稍微有些癫痫病。而且，如果启动画面较暗，则看起来又变糟了。

启动图像（启动画面）和应用程序主页之间的白色闪烁

3 个答案:

更先进的方法

两种更简单的方法