10

我有一个非常简单的 HTML5 iPhone Web 应用程序，几乎可以完美运行；只有一个问题：在启动图像和应用程序主屏幕之间，出现大约一秒钟的全白屏幕（即闪烁）。

我正在使用“添加到主屏幕”按钮将应用程序从网络下载到我的手机。javascript 文件 ( functions.js) 和样式表都是非常小的文件。

有人遇到过这个问题吗？有没有办法解决/修复它？

索引.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>

演示清单

CACHE MANIFEST
index.html
Default@2x.png
functions.js
style.css

.htaccess

AddType text/cache-manifest .manifest

编辑＃1：我做了更多的研究并得出了这个答案：

由于 HTML 的渐进性，在渲染时清除屏幕和其他工件是 HTML 渲染的常见问题。这个概念是浏览器应该尽可能早地和经常地绘制，并在样式/脚本/内容可用时呈现它们。标记可能存在一个问题，即所有渲染都会延迟，直到某些内容或脚本可用。如果出现以下情况，可能会发生这种情况：

  • 您有基于图像尺寸的动态高度，但您没有在标记或 CSS 中设置图像尺寸。
  • 您的布局基于表格，并且您没有在 CSS 中使用“table-layout:fixed”。
  • 您的 HTML 使用带有 document.write() 的内联脚本。
  • 您有某种 onLoad() 函数可以显示/修改内容。
  • 您链接到外部样式表。
  • 您正在使用不可缓存的外部内容，或者您​​已禁用缓存。
  • 您正在使用返回 404 或无法离线使用的外部内容。

我已遵循此答案中的所有建议，但它并没有消除我的网络应用程序的白色闪烁。有什么技巧可以解决这个问题吗？

编辑#2：我尝试不使用 Javascript 和样式表，只使用：

body { background-color: black }

但仍有白色闪烁。由于这似乎是所有此类 Web 应用程序的问题，我的问题是：是否有任何黑客可以解决此问题？

4

3 回答 3

1

CSS 选择器在 iOS 上非常慢（贪婪的 CSS 重置脚本的性能也很糟糕）。

头部启动的 javascript 自加载 DOM-ready 脚本和 CSS 选择器一起运行使问题更加复杂。由于您在头部同时有 CSS 和 javascript 请求，因此处理正文会有一个小但明显的延迟，尤其是正文的背景颜色。

大多数 HTML5 框架正在转向延迟脚本加载。至少您希望先加载样式表，然后再担心 javascript。尝试将css 放在顶部，将脚本放在底部，然后内联默认背景颜色（不是图像 - iOS 5 渲染缩放的背景图像和 CSS 渐变有明显的延迟）。

你也可以试试iOS5+上的 async 属性，不过我自己没试过。

希望这可以帮助 ：）

于 2012-11-24T22:38:54.910 回答
0

好吧，这似乎是一个基本而烦人的问题。我认为解决这个问题的最好方法是通过 AJAX（异步 JavaScript 和 XML）。我敢肯定您可能已经知道这是什么，但这只是一种基本上从 JavaScript 向其他地方发送文件请求然后将其加载到页面中或按照您的意愿解析它的方法。

更高级的方法

对于您的示例，我建议您注释掉具有如下背景图像的 CSS 行：

.bg-container {
    /* background-image: url(img/bg.png); /* commented out */
}

请注意，第二条注释只是让在调试代码时更容易注释和取消注释一行。

现在只需在你的 body 中添加一个简单的 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/项目/延迟加载

告诉我它是怎么回事，你用什么！XD

于 2012-11-24T23:13:10.767 回答
0

即使是简单的站点也会出现此问题。

以这个为例：它显示了一个背景为 的网站，带有iphone 7#ccc的闪屏。#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

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

更快的加载应用程序感觉更糟，有点癫痫，白色闪烁。如果启动画面很暗，它看起来又更糟了。

于 2020-07-27T18:53:48.580 回答