【JavaScript/jQuery】シンプルな方法でページが完全に読み込まれるまで要素を表示しない代わりにローディング画像を表示してみる

デザインの乱れ等の理由によって、ページが完全に読み込まれるまで要素を非表示にしたい場合は様々な方法がありますが、今回はシンプルな方法でこれを実現してみたいと思います。

方法は至って簡単で、ページが完全に読み込まれるまで表示したくない要素にdisplay:noneを付与し、ローディング画像など最初から表示させたい要素だけ表示。
ページが完全に読み込まれたら、/jQueryのshowメソッドで非表示にしていた要素を表示させ、ローディング画像などをhideで非表示にするといった方法です。

HTML

<!--ページが完全に読み込まれるまで表示する要素-->
<div class="photo1"><img src ="画像URL"/></div>

<!--ページが完全に読み込まれるまで表示したくない要素-->
<div class="body_test">要素</div>

CSS

.photo1 img{display:block;margin:0 auto;/*画像を画面の中央に*/}
.body_test {display:block;/*ページが完全に読み込まれるまで表示したくない要素を非表示に*/}

このままだとphoto1の要素が表示され、body_testの要素が表示されないだけなので、ページが完全に読み込まれた後に動作するjQueryを書き加えます。

ページが完全に読み込まれた後の処理を明記したい場合は主に以下の2つの書き方があります。

window.onload = function () {
       /*処理*/
    };

$(window).on('load', function() {
       /*処理*/
});

今回は最初のメソッドを使用し、以下のようにshowとhideメソッドを加えます。

<script>
    window.onload = function () {
       $('.photo1').hide();
$('.body_test').show();
    };
</script>

これでページが完全に読み込まれると、photo1がhideで非表示となり、body_testがshowで表示されるようになりました。

要素が表示されるときにふわっと表示されようなアニメーション効果を与えたい場合はshowをfadeInに書き換え、()内に完全に表示させるまでのミリ秒単位を指定しましょう（スライド表示させた場合はslideDown）。

（例）

<script>
    window.onload = function () {
       $('.photo1').hide();
$('.body_test').fadeIn(1000);
    };
</script>

ページが読み込まれるまでに表示したい画像はお好みの画像にして下さい。
ローディング画面であれば、自由にカラーを設定できる以下のサイトを利用するのがオススメです。

• preloaders
• ajazload.info
• Loder Generator

以上です。
シンプルな方法なのでコピペで簡単に導入できると思います。

Related Posts