重いページのすべての要素(画像など)をブラウザで一緒に読み込む

私は重いasp.netページを持っています。それがレンダリングされている間に、最初にいくつかの画像が来て、徐々に画像が残ります。我々はその行動を取り除きたい。ページは、すべてのコンテンツが準備ができてから表示され、一緒に表示されるはずです。どのように達成するのですか?ページが完全に準備ができるまで待つように求める方法はありますか?

2

4 答え

それはできますが、私はそれに反対することをお勧めします。 JavaScriptを使用して(@TJHeuvelレスポンスを参照)、DOMを準備するまで待つことができます(通常は隠されたコンテナを目に見えるコンテナに変更します)。

  1. 現在の方法:ページが読み込まれると、ユーザーは理論的に情報を取得し、ページのレイアウト方法を理解することができます。

  2. 提案された方法:あなたが言うようにページが重い場合、ユーザーはURLに行き、5秒(またはそれ以上)の "読み込み中の"アニメーションGIFを見ますか?私は自分自身のためだけに話すことができますが、完全にレンダリングされていない場合でも、むしろ何も表示されないコンテンツをいくつか見ることになります。

5
追加された
Upvoteは真実だから!
追加された 著者 TJHeuvel,

あなたは、ページを埋める要素を持つことができ、javascriptイベントonLoadが発生したときにそれを隠すことができます。

<div id='loading' style='z-index:100; width:100%; height:100%; background:#FF0000'>Loading, please wait!</div>

<script type='text/javascript'>

window.onload = function()
{
    document.getElementById('loading').style.display = 'none';
}

</script>
4
追加された
UpvoteはLijoの質問に直接答える点で有益な答えだからです。しかし、私はまだそれが通常悪い習慣だと思っています。
追加された 著者 Greg Pettit,

cssの概念画像スプライトを参照してください。このメソッドを使用してこの問題を解決することができます。ページ上のすべてのイメージを結合して1つのイメージのみを作成し、イメージスプライトを使用します。多くのWebサイトではこれを使用して、ページのコンテンツが一度に読み込まれます。

Refer this http://www.w3schools.com/css/css_image_sprites.asp

2
追加された
また便利です。すべての画像に対して1つのスプライトだけでは効果的ではありませんが、確かに関連する画像(すべてのnav項目、ボタン、ウィジェットなど)をスプライトに入れて、HTTP要求の数を減らしてより大きな塊で画像を埋め込むことができます一度に。
追加された 著者 Greg Pettit,

画像の問題に関しては、Rohal氏がCSSの画像スプライトが最高だと言っていますが、使用できない場合は、サイズを適切に変更した小さなサイズの画像を試してみてください。この Hanselmanのブログここで彼はimageresizerユーティリティの本当にいいところを教えてくれます。

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript