10

私は、ほぼ完璧に動作する非常に単純な HTML5 iPhone Web アプリケーションを持っています。問題は 1 つだけです。起動イメージとアプリのホーム画面の間に、約 1 秒間、完全に白い画面が表示されます (ちらつき)。

[ホーム画面に追加] ボタンを使用して、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>

デモ.マニフェスト

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 を返す、またはオフラインで利用できない外部コンテンツを使用しています。

この回答のすべての提案に従いましたが、Web アプリから白いちらつきが取り除かれません。この問題を回避するためのハックはありますか?

編集＃2：Javascriptを使用せず、スタイルシートのみを使用してみました：

body { background-color: black }

しかし、まだ白いちらつきがあります。これは、このようなすべての Web アプリケーションの問題であるように思われるため、私の質問は次のとおりです。この問題を回避するためのハックはありますか?

4

3 に答える 3

1

CSS セレクターは、iOS ではかなり遅いです (貪欲な CSS リセット スクリプトのパフォーマンスもひどいものです)。

Head によって開始された JavaScript の自己読み込み DOM 対応スクリプトと CSS セレクターを一緒に実行すると、問題がさらに複雑になります。ヘッドに CSS と JavaScript の両方のリクエストがあるため、本文、特に本文の背景色の処理に、わずかではあるがかなりの遅延が発生します。

ほとんどの HTML5 フレームワークは遅延スクリプト読み込みに移行しています。最低限として、最初にスタイルシートをロードし、2 番目に javascript を心配する必要があります。css を一番上に、スクリプトを一番下に配置してから、デフォルトの背景色をインライン化してみてください(画像ではありません。iOS 5 では、スケーリングされた背景画像と CSS グラデーションのレンダリングにかなりの遅延があります)。

iOS5+でasync 属性を試すこともできますが、私自身は試していません。

お役に立てれば ：）

于 2012-11-24T22:38:54.910 に答える
0

わかりました、基本的で厄介な問題のようです。これに取り組む最善の方法は、AJAX (Asynchronous JavaScript and XML) を使用することだと思います。おそらくこれが何であるかはすでにご存知だと思いますが、基本的には、JavaScript から別の場所にあるファイルの要求を送信し、それをページにロードするか、必要に応じて解析する方法にすぎません。

もう少し高度なアプローチ

あなたの例では、次のような背景画像を持つ CSS の行をコメントアウトすることをお勧めします。

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

2 番目のコメントは、コードのデバッグ中に 1 行のコメントとコメント解除を簡単にするだけであることに注意してください。

次に、単純な img タグを本体に追加し、その src を ajax ローダーにします (糸車ジェネレーターはどこにでもあります)。ここから、JavaScript を記述して画像をロードし、スピナーを取り除き、それを置き換えることができます。

2 つのより単純なアプローチ

この解決策は私には魅力的ではありません.とにかく、ほとんどの人はそれを好まないと思います. そういうわけで、私は「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 に含まれる) を使用することをお勧めします。プロジェクト/遅延ロード

やり方と使い方を教えてください！XD

于 2012-11-24T23:13:10.767 に答える