问题描述
我有一个非常简单的HTML5 iPhone Web应用程序，几乎可以完美运行;只有一个问题：在启动图像和应用程序主屏幕之间，会出现一个完全白色的屏幕（即闪烁）约一秒钟。
我正在下载应用程序通过使用添加到主屏幕按钮从网络发送到我的手机。 JavaScript文件（ functions.js ）和样式表都是非常小的文件。
有没有人有这个问题？有什么方法可以解决它吗？
index.html
<！doctype html>
< html manifest =demo.manifest>
< head>
< meta charset =UTF-8>
< title> HTML5应用程式< / title>
< link rel =stylesheettype =text / csshref =style.css/>
< link rel =apple-touch-icon-precomposedhref =Icon@2x.png/>
< link rel =apple-touch-startup-imagehref =Default@2x.png/>
< meta name =apple-mobile-web-app-capablecontent =yes/>
< meta name =viewportcontent =user-scalable = no，width = device-width/>
< / head>
< body>
< div id =wrapper> ...< / div>
< / body>
< script type =text / javascriptsrc =function.js>< / script>
< / html>
demo.manifest
CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css
.htaccess
AddType text / cache-manifest .manifest
编辑＃1 ：我已经做了一些更多的研究，并发表了和脚本放在底部，然后内置默认背景颜色（不是图像 - iOS5渲染缩放背景图像和CSS渐变有明显的延迟）。 你也可以尝试异步属性在上，但我没有尝试过。
希望这有助于：）
I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
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
EDIT #1: I have done some more research and came upon this answer:
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?
CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).
Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.
Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).
You can also try the async attribute on iOS5+, but I haven't tried it myself.
Hope this helps :)
这篇关于启动图像（启动画面）和应用主页之间的白色闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！