启动图像（启动画面）和应用程序主页之间出现白色闪烁
Posted
技术标签:
【中文标题】启动图像（启动画面）和应用程序主页之间出现白色闪烁【英文标题】：White flicker between launch image (splash screen) and app homepage 【发布时间】：2012-10-31 07:50:33 【问题描述】：我有一个非常简单的 html5 iPhone Web 应用程序，几乎可以完美运行；只有一个问题：在启动图像和应用主屏幕之间，会出现大约一秒钟的全白屏幕（即闪烁）。
我正在使用“添加到主屏幕”按钮将应用程序从网络下载到我的手机。 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 或无法离线使用的外部内容。
我已遵循此答案中的所有建议，但它并没有消除我的网络应用程序的白色闪烁。有什么技巧可以解决这个问题吗？
EDIT #2：我尝试过不使用 Javascript，而样式表只使用：
body background-color: black
但仍有白色闪烁。由于这似乎是所有此类 Web 应用程序的问题，我的问题是：是否有任何黑客可以解决此问题？
【问题讨论】：
我假设是浏览器加载你的应用程序。 是的，我相信是这样的。 【参考方案1】：即使是简单的网站也会出现此问题。
以这个为例：它显示了一个背景为 #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
您可以在应用加载时看到白色闪烁。
加载速度较快的应用程序感觉更糟，有轻微的癫痫症，并伴有白色闪烁。如果启动画面变暗，它看起来又更糟了。
【讨论】：
【参考方案2】：好吧，这似乎是一个基本且烦人的问题。我认为解决这个问题的最好方法是通过 AJAX（异步 JavaScript 和 XML）。我敢肯定您可能已经知道这是什么，但这只是一种基本上从 JavaScript 向其他地方发送文件请求然后将其加载到页面中或根据需要解析它的方法。
更高级的方法
对于您的示例，我建议您注释掉具有如下背景图像的 CSS 行：
.bg-container
/* background-image: url(img/bg.png); /* commented out */
请注意，第二条注释只是让您在调试代码时更容易注释和取消注释一行。
现在只需在你的 body 中添加一个简单的 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
告诉我它是怎么回事，以及你用什么！呵呵
【讨论】：
感谢您的详细帖子。不幸的是，这些解决方案都没有解决这个问题。【参考方案3】：iOS 上的 CSS 选择器非常慢（贪婪的 CSS 重置脚本的性能也很糟糕）。
头部启动的 javascript 自加载 DOM-ready 脚本和 CSS 选择器一起运行使问题更加复杂。由于您在头部同时有 CSS 和 javascript 请求，因此处理正文会有一个小但明显的延迟，尤其是正文的背景颜色。
大多数 HTML5 框架正在转向延迟脚本加载。至少您希望先加载样式表，然后再担心 javascript。尝试将css at the top 和脚本放在底部，然后内联默认背景颜色（不是图像 - iOS 5 渲染缩放的背景图像和 CSS 渐变有明显的延迟）。
你也可以试试iOS5+上的async属性，不过我自己没试过。
希望这会有所帮助:)
【讨论】：
我遇到过类似的问题，发现将我的脚本标签放在正文的末尾，并将我的启动屏幕代码移动到正文的顶部可以减少白色闪烁。是的，脚本标签应尽可能保留在头部，但我发现在某些情况下，将其移动到正文标签的底部确实有帮助。 感谢您的回复。我已将我的 Javascript 移至页面末尾并将启动屏幕代码移至正文顶部，但似乎仍有相同长度的白色闪烁。将背景颜色添加到 body 标签也无济于事。还有其他想法吗？ 您是否尝试过最小化您的代码：即：空脚本文件和 CSS 中的body background-color: black ？能否提供整个 html 和 CSS 的链接？
@MattMelton。我试过不使用 Javascript 和只有 body background-color: black 的样式表，但仍然有白色闪烁。由于这似乎是此类 Web 应用程序的标准问题，我想我的问题更多：是否有任何黑客可以解决此问题？
遗憾的是没有。具有嵌入式 UIWebView 的自定义加载器应用程序可以工作，但它不是 Web 应用程序，而是具有嵌入式 UIWebView 的 app。你也会失去很多 Safari 的功能，因为 Safari 是一个比 UIWebView 更新的 Webkit 版本，开发人员可以使用。以上是关于启动图像（启动画面）和应用程序主页之间出现白色闪烁的主要内容，如果未能解决你的问题，请参考以下文章
Android 启动画面不适用于 Cordova 5.0.0
ios 9，白色启动画面而不是启动图像，以前工作正常，似乎没有任何改变导致它