【问题标题】：Getting flash between startup screen and preloader on iOS webapp在 iOS webapp 上的启动屏幕和预加载器之间获取 Flash
【发布时间】：2013-02-11 03:03:14
【问题描述】：
我构建了以下测试场景：http://dev.driz.co.uk/Spinner/ 用于将在 iPhone Chromeless 上运行的 web 应用程序。如果您在 iPhone 上打开它并将其添加到您的主屏幕，您会看到它是一个带有启动屏幕和预加载器的全屏网络应用程序。
我已经按照Apple documentation 的引用制作了用户将看到的启动屏幕和第一个屏幕相同：“通常，设计一个与第一个相同的启动图像应用程序的屏幕。避免包含在应用程序完成启动时可能看起来不同的元素，以免用户在启动图像和第一个应用程序屏幕之间体验到闪烁。"
如上所述，我将它们设置为相同是为了防止在启动和应用程序本身之间发生闪烁（通常是由于不同的 UI 组件，其中我在启动时不会更改）。 但是我仍然得到这个闪光！ 就好像应用程序正在显示启动然后隐藏然后显示网站，其中包括再次显示带有启动图像的启动画面。
关于如何解决这个问题的任何想法？我什至尝试将 html/body 本身设置为具有启动屏幕的背景图像，但它们在加载时仍然是 Flash。还尝试使用实际图像而不是背景，但同样的问题。
【问题讨论】：
标签：
ios
iphone-standalone-web-app
【解决方案1】：
您找到解决方案了吗？我发现这个问题是 iPhone 的根本问题，不管你的应用是什么。
以这个为例：它显示了一个背景为#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】：
我打赌你看到的闪光是窗口的背景，或者你的 webview。它很可能是白色的，当应用程序加载时，它不会立即呈现页面，因此您会在一瞬间看到窗口的白色背景。
我会尝试在您的应用程序委托或 Interface Builder 中编辑 _window.backgroundColor（我猜是该属性名称），如果这不能解决问题，请查看您是否可以编辑 webview 的背景颜色。所有这些都可能取决于您用于创建 web 应用程序的任何工具链（即 phonegap）
【解决方案3】：
我确实知道放置加载图像对于本机应用程序是正确的，但在您链接的文档上没有任何地方说对于网络应用程序也是如此。
【解决方案4】：
好的。快速回答：不要使用 ios 启动映像 imo，因为它只是显示非常不真实，并且在 ios 之外您无论如何都无法使用它。我不知道我尝试了多长时间才能获得一个像样的图像来展示，一旦你谈论不同的设备和格式，你必须提供的所有图像都令人讨厌。
我已经完成了一个 css/javascript 启动屏幕，我将其用于我自己的应用程序（例如 here）。您可以指定根据设备加载的纵向和横向图像（4 种尺寸）。
背景附加到splash 类，我将其设置在主体上并在应用加载后将其移除。
我已将代码放在 Github 上的 repo 中。随意使用。如果您有任何问题，请告诉我。