web-dev-qa-db-ja.com

ページが完全にロードされるまで、ブラウザにページの表示を待機させるにはどうすればよいですか？

ウェブページの負荷を実際に見る方法が嫌いです。ページが完全に読み込まれ、すべてのスクリプトと画像を含む表示の準備ができるまで待ってから、ブラウザに表示させる方がずっと魅力的だと思います。だから私は2つの質問があります...

  1. これどうやってするの？
  2. 私はWeb開発の完全な初心者ですが、これは一般的な習慣ですか？そうでない場合、なぜですか？

あなたの知恵を事前に感謝します！

javascriptcssweb
74
BeachRunnerFred

これは、与えられたすべての理由など、非常に悪い考えです。それは、 jQuery を使用して行う方法です。

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

ユーザーがJavaScriptを無効にしている場合、ページは表示されません。ページの読み込みが完了しない場合、ページは表示されません。ページのロードに時間がかかりすぎる場合、何か問題が発生したと想定し、*お待ちください... * ingの代わりに他の場所に移動する可能性があります。

29
Grant Wagner

これは本当に悪い考えだと思います。ユーザーは、単純でシンプルな進捗状況を確認するのが好きです。ページを1つの状態に数秒間保ち、ロードされたページを即座に表示すると、ユーザーは何も起きていないように感じ、訪問を失う可能性が高くなります。

1つのオプションは、スタッフがバックグラウンドで処理している間、ページに読み込みステータスを表示することですが、これは通常、サイトが実際にユーザー入力の処理を行っているときに予約されています。

http://www.webdeveloper.com/forum/showthread.php?t=180958

要するに、少なくともページの読み込み中に視覚的なアクティビティを表示する必要があります。一度にページを少しずつ読み込むことはそれほど悪いことではないと思います読み込み時間）。

20
Robert Greiner

JQueryを使用したソリューションは次のとおりです。

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

このスクリプトを</body>タグの直後に配置しました。 「#container」を、非表示にするDOM要素のセレクターに置き換えるだけです。これのいくつかのバリエーション（.hide()/.show()、および.fadeOut()/.fadeIn()を含む）を試しましたが、不透明度を設定するだけで悪影響が最も少ないようです（ちらつき、変化ページの高さなど）。 css('opacity', 0)をfadeTo(100, 1)に置き換えて、スムーズな移行を行うこともできます。 （いいえ、fadeIn()は機能しません。少なくともjQuery 1.3.2では機能しません。）

ここで注意点：TypeKitを使用しているため上記を実装しました。ページを更新するとフォントの読み込みに数百ミリ秒かかるため、迷惑なちらつきがあります。そのため、TypeKitが読み込まれるまで、画面にテキストが表示されないようにします。ただし、上記のコードを使用してページ上の何かを読み込めない場合、明らかに大きな問題に直面します。改善できる2つの明白な方法があります。

  1. ページがロードされているかどうかに関係なくすべてが表示されるまでの最大制限時間（1秒など）
  2. ある種の読み込みインジケータ（たとえば、 http://www.ajaxload.info/ からの何か）

ここではロードインジケーターを実装することはありませんが、時間制限は簡単です。これを上記のスクリプトに追加するだけです。

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

したがって、最悪の場合のシナリオでは、ページが表示されるまでにさらに1秒かかります。

10
Trevor Burnham

これには確かに有効な使用法があります。 1つは、すべてのページ要素とJavaScriptが読み込まれるまで、人々がリンクをクリックしたり、JavaScriptイベントが発生するのを防ぐことです。

すなわちでは、ページが完全にロードされるまでページが表示されないことを意味するページ遷移を使用できます。

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

短い期間に注意してください。ページが完全にロードされるまでページが表示されないようにするだけで十分です。

FireFoxおよび他のブラウザーで使用した解決策は、ページのサイズと白のDIVを作成し、ページの最後に非表示にするJavaScriptを配置することです。もう1つの方法は、jQueryを使用して非表示にすることです。 IEソリューションほど簡単ではありませんが、両方ともうまく機能します。

10
Keith Adler

<body>タグの直後に次のようなものを追加します...

 <style> body  {opacity:0;}</style>

そして、あなたの<head>の最初のものとして、次のようなものを追加します...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

これが良い方法であるか悪い方法であるかは、訪問者と待機時間に依存します。

まだ開いたままで、ここで答えが表示されない質問は、ページが安定したことを確認する方法です。たとえば、フォントを読み込んでいる場合、すべてのフォントが読み込まれて表示されるまで、ページが少しリフローする場合があります。ページのレンダリングが完了したことを通知するイベントがあるかどうかを知りたいです。

4
Terry Riegel

また、サーバーがページをバッファリングし、即座に（ビルド中に）クライアントブラウザにストリームしないことを確認してください。

テクノロジースタックを指定していないため：

  • PHP： ob_start を調べます
  • ASP.NET：Response.BufferOutput = Trueを確認します（デフォルトです）
4
ChristopheD

必須：「jQueryを使用」

ページの上部にあるすべてを覆う黒または白のdivを配置し、document.loadイベントで削除するページを見てきました。または、jQueryで.readyを使用することもできます言われたところでは、これは私が今まで見た中で最も厄介なWebページの1つだったので、これに反対します。

3
Neil N

CSSを使用してすべてを非表示にできます。

#some_div
{
  display: none;
}

そして、JavaScriptでdocument.onloadに関数を割り当てて、そのdivを削除します。

jQueryを使用すると、このようなことが非常に簡単になります。

3
TheOne

これは常に良いアイデアではありませんが、本当にそれをしたいかどうかは自由に決めることができます。いくつかの異なる方法があり、ここに簡単な例を見つけました：

http://www.reconn.us/content/view/37/47/

おそらく最良のものではありませんが、独自のソリューションの開発に役立つはずです。幸運を。

3
Paulo Guedes

無効なjavascript および defs css loading に対処したい場合は、Trevor Burnhamの答えに加えて

HTML5

<html class="no-js">

    <head>...</head>

    <body>

        <header>...</header>

        <main>...</main>

        <footer>...</footer>

    </body>

</html>

CSS

//at the beginning of the page

    .js main, .js footer{

        opacity:0;

    }

JAVASCRIPT

//at the beginning of the page before loading jquery

    var h = document.querySelector("html");

    h.className += ' ' + 'js';

    h.className = h.className.replace(
    new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();

JQUERY

//somewhere at the end of the page after loading jquery

        $(window).load(function() {

            $('main').css('opacity',1);
            $('footer').css('opacity',1);

        });

リソース

2
RafaSashi

pHP-Fusion Open Source CMS、 http://www.php-fusion.co.uk で、コアでこのようにします-

    <?php
        ob_start();
        // Your PHP codes here            
        ?>
        YOUR HTML HERE


        <?php 
        $html_output = ob_get_contents();
        ob_end_clean();
        echo $html_output;
    ?>

1つずつ読み込んでいるものは表示できません。唯一のローダーはブラウザのタブスピナーであり、すべてが読み込まれた後すぐにすべてを表示します。試してみる。

この方法は、htmlファイルに完全に準拠しています。

2
Hien

私はあなたがそれを望んではいけないという他の人に同意しますが、私はあなたが少しも変えずに実際にblockingコンテンツにできることを簡単に説明しますそれはすでにそこにあります-多分これはあなたとあなたの訪問者の両方を幸せに保つのに十分でしょう。

ブラウザはページの読み込みを開始し、特にcss/jsがリンクされている場所が「正しい」場所にある場合、外部にあるcssとjsを後で処理します。 （アドバイスはできる限り遅くjsをロードし、ヘッダーにロードする外部cssを使用することだと思います）。 cssやjsの一部をできるだけ早く適用したい場合は、それをページ自体に含めるだけです。これは、YSlowのようなパフォーマンスツールのアドバイスに反しますが、おそらく、表示したいページの表示の変化を増やすでしょう。これは本当に必要な場合にのみ使用してください！

1
Simon Groenewolt

私はこれが古いスレッドであることを知っていますが、それでもです。別の簡単なオプションはこのライブラリです： http://gayadesign.com/scripts/queryLoader2/

0
jackcogdill

まず、サイトのメインインデックスページに「読み込み中」というメッセージのみを含めることから始めます。ここから、ajaxを使用して次のページのコンテンツを取得し、現在のページに埋め込み、完了時に「読み込み中」メッセージを削除できます。

ページの上部に幅/高さ100％の読み込みメッセージコンテナを含めるだけで、読み込み完了時に前述のdivを削除することができます。

後者は両方の状況で完全に機能しない場合があり、ブラウザがコンテンツをレンダリングする方法に依存します。

良いアイデアかどうかは完全にはわかりません。単純な静的サイトの場合、私はそうは言いません。しかし、私は最近、複雑なアニメーションを使用する1つのページであるデザイン会社からの大量のJavaScriptサイトを見てきました。これらのサイトは、ページが期待どおりに機能するように、すべてのscripts/html/cssがロードされるのを待つためにロードメッセージを使用します。

0
MiG

このコードが役立つことを願っています

 <html>  
    <head>
        <style type="text/css">
          .js #flash {display: none;}
        </style>
        <script type="text/javascript">
          document.documentElement.className = 'js';
        </script>
      </head>
      <body>
        <!-- the rest of your code goes here -->

        <script type="text/javascript" src="/scripts/jquery.js"></script>
        <script type="text/javascript">
          // Stuff to do as soon as the body finishes loading.
          // No need for $(document).ready() here.
        </script>
      </body>
    </html>
0
sir. enock

Display：noneを使用しないでください。その場合、show（）を実行すると、画像のサイズ変更/再配置が表示されます。代わりにvisibility：hiddenを使用すると、すべてが正しくレイアウトされますが、指示するまで表示されません。

0
tbott