作成したWebサイトのページに含まれるDOM要素が多く、ページの表示が遅い。 また、JavaScriptなどで再レイアウトされる要素が崩れるといった症状がでている。
すべての要素が読み込まれるまでページを表示させず、すべての要素が読み込まれた時点でページを表示させるにはどうすればよいか。
js部分ですが、jQueryで統一した書き方。
$(function(){ // window.loadと同等、DOMの初期化後に呼ばれる
$('#loading').fadeOut(300);
$('#loaded').fadeIn(300);
});
のように書くとよりスマートかと思います。
$()
はwindow.onloadとは同等ではありません。長くなったので私の回答の方に記載しています。 ja.stackoverflow.com/a/1526/728
Commented
2014年12月11日 14:05
$( document ).ready()
と入れ違いをしておりました。
Commented
2014年12月12日 9:14
大した補足じゃないんですが、指摘のついでに。
そのままdivを並べてしまうと以下の様になって、loadingもloadedも両方見えてしまいます。
position: absolute
でかぶせるなどの対応が必要でしょう。
この場合、見た目の上では loadedの方は隠しておかなくても問題ないかと思いますが、 ボタン等を配置する場合は操作できない様にしておく必要が出てきます。
あと、
$(function(){
});
は、たしかにDOMの解析後ですが、$(document).ready(function(){ }
と同じであり、全ての読み込みが終わったwindow.onload
よりも早いタイミングでのイベントとなります。
たとえば画像の読み込みが終わっているかどうかの違いがあります。
ですので window.onload=loaded()
の部分は
$(window).load(function(){
$("#loading").fadeOut(300);
$("#loaded").fadeIn(300);
});
と書かないと元のコードと同じとはなりません。
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()
の簡略記法として$()
を使用することがあります。
HTML側で
<body>
<div id="loading">
<!-- ロード中の表示 -->
</div>
<div id="loaded">
<!-- ロード完了後の表示 -->
</div>
</body>
とし、CSSで
#loaded{display:none;}
を付加しておく。これによって、まず、ローディングのみが表示されるようになる。 JavaScript側で、
window.onload = loaded(); //ページの読み込みが完了したらloaded()を呼び出し。
function loaded(){ //ページ読み込み完了時に呼び出されるfunction
$("#loading").fadeOut(300); //ロード画面(#loading)を300msかけてフェードアウトさせる。
$("#loaded").fadeIn(300); //ロード完了後に表示させる画面(#loaded)を300msかけてフェードインさせる。
}
例では、jQueryのfadeOut()とfadeIn()を使用したが、それぞれ、hide()とshow()を使用して実装することも可能。