Javascript 启动图像（启动屏幕）和应用程序主页之间出现白色闪烁_Javascript_Iphone_Html_Ios_Web Applications

Javascript 启动图像（启动屏幕）和应用程序主页之间出现白色闪烁

javascript iphone html ios web-applications

Javascript 启动图像（启动屏幕）和应用程序主页之间出现白色闪烁,javascript,iphone,html,ios,web-applications,Javascript,Iphone,Html,Ios,Web Applications,我有一个非常简单的HTML5 iPhone web应用程序，几乎可以完美地工作；只有一个问题：在启动图像和应用程序主屏幕之间，出现一个完全白色的屏幕（即闪烁）约一秒钟我正在使用“添加到主屏幕”按钮从网络上将应用程序下载到手机。javascript文件（functions.js）和样式表都是非常小的文件有人有这个问题吗？有没有办法解决/修复它 index.html <!doctype html> <html manifest="demo.manifest"> <h

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

我正在使用“添加到主屏幕”按钮从网络上将应用程序下载到手机。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>

.htaccess

AddType text/cache-manifest .manifest

编辑#1：我做了更多的研究，发现：

由于HTML的渐进性，在呈现时清除屏幕和其他工件是HTML呈现的常见问题。其概念是，浏览器应尽早且经常绘制，并在可用时呈现样式/脚本/内容。标记可能存在一个问题，即在某些内容或脚本可用之前，所有呈现都会延迟。如果：

您有基于图像尺寸的动态高度，但没有在标记或CSS中设置图像尺寸
您的布局是基于表的，您没有在CSS中使用“table layout:fixed”
HTML将内联脚本与document.write（）一起使用
您有一些onLoad（）函数，用于显示/修改内容
您可以链接到外部样式表
您正在使用不可缓存的外部内容或已禁用缓存
您使用的外部内容返回404或无法脱机使用

我遵循了这个答案中的所有建议，但它并没有消除我的web应用程序中的白色闪烁。有什么黑客可以绕过这个问题吗

编辑#2：我尝试过不使用Javascript，只使用以下内容的样式表：

body { background-color: black }

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

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

Head启动的javascript自加载DOM就绪脚本和同时运行的CSS选择器进一步加剧了问题。由于头部同时包含CSS和javascript请求，因此在处理主体（尤其是主体的背景颜色）时会有一个很小但明显的延迟

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

您也可以在上尝试async属性，但我自己还没有尝试过

希望这能帮上忙：）

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

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

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

<body>
    <div id="body">
        <!-- All the content should go here -->
    </div>

    <!-- This will disappear on first ajax load -->
</body>

请注意，第二条注释只是使调试代码时注释和取消注释这一行变得更容易

现在只需向身体添加一个简单的img标记，并将其src设置为ajax加载程序（您可以在任何地方找到纺车生成器）。从这里，您可以编写一些JavaScript来加载图像、去掉微调器并替换它

两种更简单的方法这个解决方案对我没有吸引力，我不认为大多数人会喜欢它。这就是为什么我使用这是我几个月前写的一个小AJAX加载工具来帮助人们解决这类问题

它很容易使用，除了脚本include外，只需添加以下元标记：

<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">

表单和锚定是可选的，如果您使用它，它将使您的所有表单和链接异步（不适用于跨域使用）。表单不容易设置，如果您愿意，可以阅读相关文档

最后，像这样设置你的身体：

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

<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中），也可以从以下网站获得：

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

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

举个例子：它显示了一个背景为

#ccc

的网站，iphone 7的splashscreen为

#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>


iOS网络应用程序
iOS网络应用程序

当应用程序加载时，您可以看到白色闪烁

加载速度更快的应用程序感觉更糟，有点癫痫，带有白色闪光灯。如果启动屏幕变暗，情况会更糟。

我想是浏览器加载了你的应用程序。是的，我相信是这样。我也遇到过类似的问题，发现将脚本标记放在正文末尾，并将启动屏幕代码移到正文顶部，可以减少白色闪烁。是的，脚本标签应该尽可能保留在头部，但我发现在某些情况下，将其移动到正文标签的底部会有所帮助。感谢您的回复。我已经将Javascript移到了页面的末尾，并将启动屏幕代码移到了正文的顶部，但仍然有相同长度的白色闪烁。将背景色添加到body标签也没有帮助。还有其他的想法吗？你有没有试着减少你的c