启动图像（启animation面）和应用程序主页之间的白色闪烁
我有一个非常简单的HTML5 iPhone Web应用程序，几乎完美的工作; 只有一个问题：在启动图像和应用程序主屏幕之间，出现一个完全白色的屏幕（即闪烁）约一秒钟。
我使用“添加到主屏幕”button将应用程序从networking下载到我的手机。 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 ：我做了一些更多的研究，并得出这个答案 ：
由于HTML的渐进性，在呈现时清除屏幕和其他工件是HTML呈现的常见问题。 其概念是浏览器应尽早绘制，并尽可能渲染样式/脚本/内容。 有可能标记有一个问题，所有渲染延迟，直到一些内容或脚本可用。这可能发生如果：
- 你有基于图像尺寸的dynamic高度，但是你没有在标记或CSS中设置图像尺寸。
- 你的布局是基于表格，你不是在CSS中使用“table-layout：fixed”。
- 您的HTML与document.write（）一起使用内联脚本。
- 你有一些onLoad（）函数显示/修改内容。
- 您链接到外部样式表。
- 您正在使用不可caching的外部内容，或者您禁用了caching。
- 您正在使用返回404的外部内容，或者不能离线使用。
我已经按照这个答案中的所有build议，但它并没有摆脱我的Web应用程序的白色闪烁。 有什么黑客来解决这个问题？
编辑＃2 ：我已经尝试使用没有JavaScript和样式表只有：
body { background-color: black }
但是，仍然有一个白色的闪烁。 由于这似乎是所有这样的networking应用程序的问题，我的问题是：是否有任何黑客来解决这个问题？
CSSselect器在iOS上很慢（贪婪的CSS重置脚本也有很糟糕的性能）。
头部启动JavaScript自加载DOM准备脚本和CSSselect器一起运行，进一步复杂的问题。 由于您的CSS和JavaScript请求都在头部，所以处理身体的时间很短，但明显延迟，尤其是身体的背景颜色。
大多数HTML5框架正在推迟脚本加载。 作为一个minmum你希望得到的样式表首先加载和担心JavaScript第二。 尝试把顶部的CSS和底部的脚本，然后内联一个默认的背景颜色 （不是图像 – 在iOS 5渲染缩放背景图像和CSS渐变有一个明显的延迟）。
你也可以尝试iOS5 +的asynchronous属性，但我没有尝试过自己。
希望这可以帮助 ：）
好吧，看起来像一个基本和烦人的问题。 我认为解决这个问题的最好方法是通过AJAX（asynchronousJavaScript和XML）。 我相信你可能已经知道这是什么了，但它只是一种基本上从JavaScript发送一个文件到其他地方的文件，然后将其加载到页面或parsing它，但是你希望的方式。
多一点先进的方法
对于你的例子，我build议你注释掉具有如下背景图像的CSS行：
.bg-container { /* background-image: url(img/bg.png); /* commented out */ }
请注意，第二个注释只是在debugging代码时更容易注释和取消注释。
现在只需添加一个简单的img标签到你的身体，并使其src是一个ajax加载程序（你可以在任何地方find纺车发电机）。 从这里你可以写一些JavaScript来加载图像，摆脱微调，并取而代之。
两个更简单的方法
这个解决scheme不吸引我，我不认为大多数人会喜欢它。 这就是为什么我使用'Bootloader.js' ，这是我几个月前写的一个小AJAX加载工具，可以帮助有这些问题的人。
除了脚本之外，使用起来很简单，只需添加这个元标记即可：
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
表单和锚点是可选的，如果你使用它，它会使你所有的表单和链接asynchronous（不是跨域使用）。 表格不容易设置，你可以阅读文档，如果你想。
最后，设置你的身体是这样的：
<body> <div id="body"> <!-- All the content should go here --> </div> <!-- This will disappear on first ajax load --> </body>
而且你已经拥有了，这将会为你处理所有的事情。
最后的build议
如果你不喜欢这些选项，或者想要一个有限但可定制的选项，我build议你使用Mika Tuupola的Image LazyLoader（包含在Bootloader.js中），也可以在http://www.appelsiini.net/上find。项目/ lazyload
告诉我是怎么回事，你用什么！ XD