javascript 启动图像(闪屏)和应用程序主页之间的白色 Flink

vlju58qv 于 2023-08-02 发布在 Java

关注(0)|答案(4)|浏览(98)

我有一个非常简单的HTML5 iPhone Web应用程序，它几乎可以完美地工作;只有一个问题在启动图像和应用主屏幕之间，出现完全白色的屏幕（即， Flink ）约一秒。
我正在使用“添加到主屏幕”按钮将应用程序从网络下载到手机上。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或无法脱机使用的外部内容。

我已经遵循了这个答案中的所有建议，但它并没有摆脱我的Web应用程序的白色 Flink 。有没有什么方法可以解决这个问题？

编辑#2：我试过不使用JavaScript，只使用样式表：

body { background-color: black }

型
但仍有白色 Flink 。由于这似乎是所有Web应用程序的一个问题，我的问题是：有没有什么方法可以解决这个问题？

JavaScript

来源：https://stackoverflow.com/questions/13334397/white-flicker-between-launch-image-splash-screen-and-app-homepage

4条答案

按热度按时间

c0vxltue1#

CSS选择器在iOS上非常慢（贪婪的CSS重置脚本也有可怕的性能）。
Head启动的JavaScript自加载DOM就绪脚本和CSS选择器一起运行进一步加剧了问题。由于头部同时有CSS和JavaScript请求，因此在处理主体时会有一个小但明显的延迟，尤其是主体的背景颜色。
大多数HTML5框架正在转向延迟脚本加载。作为一个最低限度，你想得到的样式表加载第一和担心JavaScript第二。尝试将css放在顶部，脚本放在底部，然后内联默认的背景 * 颜色 *（不是图像-在iOS 5渲染缩放的背景图像和CSS渐变时会有明显的延迟）。
你也可以在iOS5+上尝试async属性，但我自己还没有尝试过。
希望这对你有帮助：）

赞(0）回复(0）举报 2023-08-02

3bygqnnd2#

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

更高级的方法

对于您的示例，我建议您注解掉具有background-image的CSS行，如下所示：

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

字符串
请注意，第二个注解只是使调试代码时注解和取消注解这一行变得更容易。
现在只需要在body中添加一个简单的img标签，并将其src设置为一 AJAX 加载器（您可以在任何地方找到纺车生成器）。在这里，您可以编写一些JavaScript来加载图像，删除微调器并替换它。

两种更简单的方法

这个解决方案对我没有吸引力，我不认为大多数人会喜欢它。这就是为什么我使用'Bootloader.js'，这是我几个月前写的一个小 AJAX 加载工具，可以帮助人们解决这类问题。
它很容易使用，除了脚本include，只需添加这个Meta标签：

<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

赞(0）回复(0）举报 2023-08-02

vsdwdz233#

即使是简单的网站也会出现这个问题。
举个例子：它显示了一个网站与背景的#ccc与splashscreen的#ccc为iPhone 7.

<!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://i.stack.imgur.com/fcDiW.jpg
你可以看到一个白色 Flink ，而应用程序加载。
快速加载应用程序感觉更糟，轻微癫痫，与白色闪光。而且如果启动画面是暗的，它看起来又更糟了。

赞(0）回复(0）举报 2023-08-02

7cwmlq894#

一种方法来缓解远离它看起来像一个小故障是添加一个淡入从白色动画，不是一个完整的修复，但它确实使外观更加稳定

<html>
<style>
html,body {
  background-color   : black;
  animation-duration : 1s;
  animation-name     : animate-color;
  animation-fill-mode: backwards;
}

@keyframes animate-color {
  0%   { background-color: white; }
  100% { background-color: black; }
}
</style>
<html>

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 启动图像(闪屏)和应用程序主页之间的白色 Flink

4条答案

更高级的方法

两种更简单的方法

相关问题

热门标签

最新问答