7

実行時間の長いレポートがあり、生成中に待機スピナーをユーザーに表示したいと考えています。私はすでにこの作業を行っていますが、最善の方法または正しい方法で行っているかどうかはわかりません。

これは ColdFusion を使用していますが、私が推測する任意の言語である可能性があります。ページの上部には、待機スピナーを表示する Javascript (jQuery) と、スピナーを下げる documentReady ハンドラーがあります。出力をフラッシュし (問題がある場合)、残りのコードがレポートの内容に対して機能します。これは決してスピナーをレンダリングするものではなく、サーバー上で何かをフラッシュしていたとしても、途中で何らかのバッファリングが発生し、ブラウザーは手遅れになるまでスピナー コードを認識しなかったと理論付けました。そこで、数百行の HTML コメントを吐き出すループをフラッシュする直前に追加しました。行数を微調整した後、それでうまくいきました。そのとき、他のサイトもそうだったと思いました。

しかし、今日、長時間実行されるジョブのステータスを行ごとに出力する私の別のページを見ているときに、そのページが各行の後にフラッシュされ、ブラウザーがそれを必要に応じて段階的にレンダリングすることに気づきました。これは上記の私の結論と一致せず、ルールが何であるかわかりません。これを行う予測可能な方法はありますか？ブラウザごとに異なりますか？

明確化：待機スピナーを実行する正しい方法を説明しようとする回答に感謝しますが、実際の質問を説明するための例として待機スピナーを使用しているだけです：ブラウザーがいつレンダリングを開始するかを予測する信頼できる方法はありますかネット経由でストリーミングされる HTML は? ブラウザが /html タグの動作を開始するのを待たないことは、観察によって明らかです。この質問は必ずしも Javascript とは関係ありません。たとえば、ステータスを示す 2 番目のページは純粋な HTML です。

4

4 に答える 4

2

Firefox に組み込まれている遅延以外にも、ブラウザーがレンダリング前に待機する原因となる他の領域があります。

html ページがブラウザに送信されると、ブラウザは画面を描画する前にまずどこに移動するかを決定する必要があります。たとえば、テーブルはレンダリングの遅延を引き起こすことで有名です。テーブルを描画するために、ブラウザーは列のサイズを計算する必要があります。パーセンテージを列幅として使用するか、パーセンテージをまったく指定しない場合、ブラウザはレンダリングの前にテーブル全体を取得する必要があります。

ただし、css 属性のようなものを使用するとtable-layout: fixed;、ブラウザは最初の行を読み取るだけで、データが供給されると描画を開始できます。

他のタグでも同様の問題が発生する可能性があります。基本的に、ブラウザがコンテンツのサイズを計算する必要があるときはいつでも、レンダリングするすべてのコンテンツが必要です。固定サイズ (幅/高さ) の要素を使用して事前にヒントを与えることができれば、ブラウザーは何も把握する必要がなく、要素がダウンロードされるときに描画できます。

自主ルールとして、私はブラウザーに何かを決定させません。代わりに、要素のサイズを固定します。その結果、私が取り組んでいるサイトは通常、非常に高速にレンダリングされます。

于 2010-02-08T05:49:19.890 に答える
2

私があなたを正しく理解していれば、ページがまだコンテンツをロードしている間に「ロード中」の画像を表示する必要があります。

私がしていること、そして私が信じている最善の方法は、読み込み中の画像/テキストを保持する body-tag に最も近い、ページの上部に div-tag を追加することです。css を使用して、この div を別の場所に配置できます。

次に、ページがロードされたときに Jquery にこの div を削除させます。$(document).readyを使用する代わりに、すべてのフレーム、オブジェクト、および画像を含む完全なページが完全に読み込まれるとアクティブになるため、代わりに$(window).loadを使用することをお勧めします。
こちらのリンクを参照してください。http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

例; 

<body>    
<div id="loading" style="z-index:200; width:100%; height:40px; border-top:2px #D4D4D4 solid;  background:#E8E8E8; color:#000; position:fixed; bottom:0; left:0;">
    <div align="center">
        <img src="load.gif" alt="Loading...">
    </div>
</div>
<script type="text/javascript">
    $(window).load(function() { $("#loading").remove(); });
</script>
[...]

...

于 2010-02-05T09:22:52.607 に答える
0

ブラウザーによって異なると思います。ページが完全に受信される前にレンダリングを開始するものもあります。開始する前に html ファイル全体を待機するものもあります。

HTTP 応答仕様が「206 Partial Content」ヘッダーを提供していることに注意してください。これは、検討する価値のあるクロスブラウザー ソリューションに希望を与える可能性があります。

それをカットする方法はほぼ間違いなくいくつかありますが、私の当面のアイデアは、スタブ ページを配信し、ajax を使用してフラグメントをプルし、オンデマンドでレンダリングすることです。たとえば、多くの大きなサイトは最初は最小限のビューしか提供していないように見えますが、下に十分にスクロールすると、より多くのデータを取得してページに追加する ajax リクエストが起動されます。例: フェイスブック、スラッシュドット。

これを実装するのが難しすぎるとは思えません。常温核融合でも。ajax リクエストを起動するとスピナーを開始し、コールバックが呼び出されると停止します。

于 2010-02-05T00:32:58.910 に答える