啟動圖像（啟動畫面）和應用主頁之間的白色閃爍

Question

我有一個非常簡單的 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 應用程序的問題，因此我的問題是：是否有任何技巧可以解決此問題？

Answer 1

CSS 選擇器在 iOS 上非常慢（貪婪的 CSS 重置腳本也有糟糕的性能）。

Head 啟動的 javascript 自加載 DOM 就緒腳本和 CSS 選擇器一起運行進一步加劇了問題。 由於您的頭部同時有 CSS 和 javascript 請求，因此處理正文（尤其是正文的背景顏色）會有一個很小但很明顯的延遲。

大多數 HTML5 框架正在轉向延遲腳本加載。 至少，您希望先加載樣式表，然后再擔心 javascript。 嘗試將css 放在頂部，將腳本放在底部，然后內聯默認背景顏色（不是圖像 - 在 iOS 5 渲染縮放背景圖像和 CSS 漸變上有明顯的延遲）。

您也可以在iOS5+上嘗試 async 屬性，但我自己沒有嘗試過。

希望這可以幫助：）

Answer 2

好吧，這似乎是一個基本而煩人的問題。 我認為解決這個問題的最好方法是通過 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

Answer 3

即使是簡單的站點也會出現此問題。

以這個為例：它顯示了一個網站，背景為#ccc #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

應用加載時，您可以看到白色閃爍。

更快的加載應用程序感覺更糟，有點癲癇，白色閃光。 如果啟動畫面很暗，它看起來又會更糟。

啟動圖像（啟動畫面）和應用主頁之間的白色閃爍

問題描述

3 個解決方案

解決方案1
1 2012-11-24 22:38:54

解決方案2
0 2012-11-24 23:13:10

更高級的方法

兩種更簡單的方法

解決方案3
0 2020-07-27 18:53:48

啟動圖像（啟動畫面）和應用主頁之間的白色閃爍

問題描述

3 個解決方案

解決方案1 1 2012-11-24 22:38:54

解決方案2 0 2012-11-24 23:13:10

更高級的方法

兩種更簡單的方法

解決方案3 0 2020-07-27 18:53:48

解決方案1
1 2012-11-24 22:38:54

解決方案2
0 2012-11-24 23:13:10

解決方案3
0 2020-07-27 18:53:48