我有一个非常简单的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>
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或无法离线使用的外部内容。
我已经按照这个答案中的所有建议,但它没有摆脱我的网络应用程序的白色闪烁。是否有任何黑客可以解决这个问题?
编辑#2 :我尝试过不使用Javascript和仅使用样式表:
body { background-color: black }
但仍有白色闪烁。由于这似乎是所有这类Web应用程序的问题,我的问题是:是否有任何黑客可以解决这个问题?
答案 0 :(得分:1)
CSS选择器在iOS上相当慢(贪婪的CSS重置脚本也有可怕的性能)。
头部启动的javascript自加载DOM-ready脚本和CSS选择器一起运行使问题进一步复杂化。由于头部有CSS和javascript请求,因此处理身体时会有一个很小但很明显的延迟,特别是身体的背景颜色。
大多数HTML5框架正在转向延迟脚本加载。作为一个minmum,你想首先加载样式表,然后担心javascript。尝试将css at the top和脚本放在底部,然后内联默认背景颜色(不是图像 - iOS 5渲染缩放后的背景图像和CSS渐变会有明显的延迟)。
您也可以尝试iOS5+上的async属性,但我自己没有尝试过。
希望这会有所帮助:)
答案 1 :(得分:0)
对于您的示例,我建议您注释掉具有如下背景图像的CSS行:
.bg-container {
/* background-image: url(img/bg.png); /* commented out */
}
请注意,第二条注释只是在调试代码时更容易注释和取消注释一行。
现在只需在您的身体上添加一个简单的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
告诉我它是怎么回事,以及你用的是什么! XD
答案 2 :(得分:0)
即使是简单的网站也会出现此问题。
例如:显示一个背景为#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>
在加载应用程序时,您会看到白色闪烁。
使用白色闪光灯,快速加载的应用程序感觉更糟,稍微有些癫痫病。而且,如果启动画面较暗,则看起来又变糟了。