我有一个非常简单的 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>
演示.manifest
CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
编辑 #1:我做了更多的研究并发现了 this answer :
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
- You have dynamic heights based on image dimensions but you haven't set the image dimensions in the markup or CSS.
- Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
- Your HTML uses inline scripts with document.write().
- You have some kind of onLoad() function that reveals/modifies content.
- You link to an external stylesheet.
- You're using uncacheable external content or you've disabled caching.
- You're using external content that's returning 404 or isn't available offline.
我已遵循此答案中的所有建议，但它并没有消除我的网络应用程序的白色闪烁。是否有任何技巧可以解决此问题？
编辑#2:我试过不使用 Javascript，只使用样式表:
body { background-color: black }
但还是有白光闪烁。由于这似乎是所有此类 Web 应用程序的问题，我的问题是:是否有任何黑客可以解决此问题？
最佳答案
CSS 选择器在 iOS 上非常慢(贪婪的 CSS 重置脚本也有糟糕的性能)。
Head 发起的 javascript 自加载 DOM 就绪脚本和 CSS 选择器一起运行使问题进一步复杂化。由于头部同时有 CSS 和 javascript 请求，因此处理正文时会有一个小但明显的延迟，尤其是正文的背景颜色。
大多数 HTML5 框架正在转向延迟脚本加载。作为最小值，您希望首先加载样式表，然后再担心 javascript。尝试将 css at the top和底部的脚本，然后内联默认背景颜色(不是图像 - iOS 5 渲染缩放背景图像和 CSS 渐变时有明显的延迟)。
您也可以在 iOS5+ 上尝试异步属性，但我自己没有尝试过。
希望这有帮助:)
关于javascript - 启动图像(启动画面)和应用程序主页之间出现白色闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13334397/