2

このウェブサイトは画像とテキストが多く、低速の接続、インターネット ブラウザー、または RAM の少ないコンピューターでは、テキストが最初に読み込まれ、次に画像の読み込みに時間がかかります。すべてが同時に表示されるようにするにはどうすればよいですか?

私が考えた解決策：

  1. 出力バッファリング - PHP スクリプトの上部ob_startとob_end_flush下部で、スクリプトが処理される前に何も送信されないようにします。
  2. DOM 全体を Javascript 変数にロードし、すべてがロードされた後にそれをエコーアウトします。

すべてのブラウザーで動作し、遅いコンピューターでも動作する最良の方法はどれだと思いますか? さまざまな速度と RAM を備えたさまざまなプラットフォームやコンピューターでテストしていません。メディアの重いサイトでの経験がある場合、またはより良い方法がある場合は、どちらの道をたどるか教えてください.

4

4 に答える 4

7

JavaScripに頼る余裕がある場合は、すべてのコンテンツを一度に表示するためのシンプルで効果的なソリューションがあります。

  1. ウィンドウ全体の上に白いレイヤーを置きます。これにより、すべてのコンテンツが非表示になります。
  2. イベントwindow.onloadを使用して、カバーレイヤーを非表示/削除します。
  3. イベントwindow.onunloadを使用して、非表示レイヤーを再度表示します。

レイヤー：

    ...
    <style>
        html, body{ height: 100%; }
        #hiding {
            display:    block;
            width:      100%;
            height:     100%;
            position:   absolute;
            top:        0;
            left:       0;
            background: #fff;
        }
    </style>
</head>
<body>
    <div id="hiding"></div>
    ...

JavaScriptイベント：

        ...
        <script>
            window.onload = function () {
                document.getElementById('hiding').style.display = 'none';
            };
            window.onunload = function () {
                document.getElementById('hiding').style.display = 'block';
            };
        </scritp>
    </body>
</html>

注：これらのスタイルやJavaScriptコードを外部ファイルに入れないでください。

注2：ローディングスピナーを非表示レイヤーの中央に配置すると便利です。#hiding { ... }これをスタイルブロックに追加できます。background: #fff url(/images/spinner.gif) center center;

于 2012-10-25T16:23:22.513 に答える
2
  1. CDN でイメージをホストする
  2. timthumb のような画像またはページのキャッシュを使用する
  3. JavaScript または jquery を使用して画像をプリロードする
  4. レイアウトには、テーブルではなく div またはセクションを使用します。（古い学校のウェブサイトとその読み込み方法を覚えています）
  5. プログレッシブ画像フォーマットを使用する
  6. GZIP圧縮
于 2012-10-25T15:33:02.933 に答える
2

PHP が終了すると、HTML コードが出力され、その中に画像のソース パス (および css、js などのファイルも) が出力されます。その後、ブラウザーは、ページに必要な外部コンテンツを取得するための新しい要求を開始します。

一度にすべてを印刷しようとしている場合 (画像やその他のリソースが完全に読み込まれたら)、css と js を使用してこれを行うことができます。

css を使用すると、display: none ルールを使用して、ページの「メイン ラッパー」を非表示にすることができます。必要に応じて、「読み込み中」のテキストまたは gif ベースの画像を使用して、ページが現在読み込まれていることをエンド ユーザーに示すことができます。 .

次に、javascript で window.onload コールバックを実装します (jquery ready イベントではありません)。DOM の準備が整い、すべてのリソースが完全に読み込まれると、Window.onload イベントがトリガーされます。これは2番目の段落で説明されています

次に、その onload コールバックで、表示する必要があります。非表示の「メイン ラッパー」コンテンツをブロックし、「読み込み中」メッセージを削除または非表示にします。

于 2012-10-25T15:40:38.517 に答える
2

ブラウザーが HTML ドキュメントを要求すると、HTTP 呼び出しが発生します。次に、ページ コンテンツの調査を開始し、外部リソース (css ファイル、スクリプト、画像) を見つけると、他の HTTP 要求を非同期で (通常は同じサーバーに対して 2 つまで) 作成し、リソースが正常に取得されると (または前に、たとえば CSS の場合)、調査を開始します。

したがって、PHP 側でできることは何もありません (出力をバッファリングしますか?なぜそれが機能すると思いますか?)

アプリケーションが開始前にリソースをロードする必要がある場合 (ロード画面のあるゲームなど)、自分で管理する必要があります。たとえば、メインの HTML ドキュメントには JS ファイルのみが含まれ、リソースがダウンロードされます。すべてのリソース (この場合は画像といくつかのテキスト ファイル) が読み込まれると、スクリプトによってページが作成されます (ここでも、DOM などの既存のテクノロジを再利用するためのいくつかのトリックが見つかるかもしれませんが、それは間違いなくあなた次第です)。

画像の取得を高速化するには、高速サーバー (CDN) を使用するか、(適切であればさらに良い)、すべての画像を 1 つの大きな画像に結合し、クライアント側で分割することができます。これは、アプリが本当にゲームである場合によく使用されます。

于 2012-10-25T15:37:53.027 に答える