启动图像(启动画面)和应用程序主页之间的白色闪烁

时间:2012-11-11 19:03:44

标签: javascript iphone html ios web-applications

我有一个非常简单的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应用程序的问题,我的问题是:是否有任何黑客可以解决这个问题?

3 个答案:

答案 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)

好吧,好像是个基本烦人的问题。我认为解决这个问题的最佳方法是通过AJAX(异步JavaScript和XML)。我相信你可能已经知道这是什么了,但它只是一种基本上从JavaScript发送文件到其他地方的文件的方法,然后将其加载到页面中或者根据你的意愿解析它。

更先进的方法

对于您的示例,我建议您注释掉具有如下背景图像的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>

https://imgur.com/a/tGiREVM

在加载应用程序时,您会看到白色闪烁。

使用白色闪光灯,快速加载的应用程序感觉更糟,稍微有些癫痫病。而且,如果启动画面较暗,则看起来又变糟了。