

作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。
また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。

すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。


CC BY-SA 3.0
2014-12-11T05:20:45.393
510
2014-12-12T03:39:19.923
2014-12-11T06:48:31.937
982
905
question
javascript css html5 jquery
jQuery / JavaScriptで、ロード画面を表示させたい


HTML側で

[code]

    <body>
        <div id="loading">
            <!-- ロード中の表示 -->
        </div>
        <div id="loaded">
            <!-- ロード完了後の表示 -->
        </div>
    </body>
    
[/code]

とし、CSSで

[code]

    #loaded{display:none;}
    
[/code]

を付加しておく。これによって、まず、ローディングのみが表示されるようになる。 JavaScript側で、

[code]

    window.onload = loaded(); //ページの読み込みが完了したらloaded()を呼び出し。
    function loaded(){ //ページ読み込み完了時に呼び出されるfunction
        $("#loading").fadeOut(300);  //ロード画面(#loading)を300msかけてフェードアウトさせる。
        $("#loaded").fadeIn(300);  //ロード完了後に表示させる画面(#loaded)を300msかけてフェードインさせる。
    }
    
[/code]

例では、jQueryのfadeOut()とfadeIn()を使用したが、それぞれ、hide()とshow()を使用して実装することも可能。


CC BY-SA 3.0
2014-12-11T05:20:45.393
511
2014-12-11T05:20:45.393
905
510
answer


js部分ですが、jQueryで統一した書き方。

[code]

    $(function(){ // window.loadと同等、DOMの初期化後に呼ばれる
      $('#loading').fadeOut(300);
      $('#loaded').fadeIn(300);
    });
    
[/code]

のように書くとよりスマートかと思います。


CC BY-SA 3.0
2014-12-11T08:16:29.863
1521
2014-12-11T08:16:29.863
637
510
answer


大した補足じゃないんですが、指摘のついでに。

そのままdivを並べてしまうと以下の様になって、loadingもloadedも両方見えてしまいます。

[sample1](http://jsfiddle.net/w74qaqo4/)

`position: absolute`でかぶせるなどの対応が必要でしょう。

[sample2](http://jsfiddle.net/w74qaqo4/1/)

この場合、見た目の上では loadedの方は隠しておかなくても問題ないかと思いますが、 ボタン等を配置する場合は操作できない様にしておく必要が出てきます。

あと、

[code]

    $(function(){
    });
    
[/code]

は、たしかにDOMの解析後ですが、`$(document).ready(function(){ }`
と同じであり、全ての読み込みが終わった`window.onload`よりも早いタイミングでのイベントとなります。
たとえば画像の読み込みが終わっているかどうかの違いがあります。

ですので `window.onload=loaded()` の部分は

[code]

    $(window).load(function(){
        $("#loading").fadeOut(300);
        $("#loaded").fadeIn(300); 
    });
    
[/code]

と書かないと元のコードと同じとはなりません。

[`$( document ).ready()`](http://learn.jquery.com/using-jquery-core/document-
ready/)

> Code included inside $( document ).ready() will only run once the page
> Document Object Model (DOM) is ready for JavaScript code to execute. Code
> included inside $( window ).load(function() { ... }) will run once the
> entire page (images or iframes), not just the DOM, is ready.
>

>> `$( document
).ready()`の中に書いたコードは、ページのDOMがjavascriptの実行のための準備ができると実行されます。`$( window
).load(function() { ... })`は、DOMではなく、ページ全体(画像やiframeも含む)の準備ができると実行されます。

および

> Experienced developers sometimes use the shorthand $() for $( document
> ).ready().
>

>> 経験を積んだ技術者は`$( document ).ready()` の簡略記法として `$()`を使用することがあります。


CC BY-SA 3.0
2014-12-11T13:27:31.987
1526
2014-12-12T03:39:19.923
2014-12-12T03:39:19.923
728
728
510
answer