【jQuery】時間設定してローディングさせてからページを表示させる方法

ローディングさせてからページを表示させる方法について紹介していきたいと思っています。

そう！ローディングといえばあの読み込み時にクルクル回るやつです。

今回はページをすべて読み込み終わってから画面を表示するのではなく時間を設定してそれまでの時間をローディングさせる方法になります。

ローディングさせてからページを表示させる方法

html

こちらはローディング後に表示させたいエリアになります。

<div class="wrap">
        <p>ローディング後の画面</p>
</div>

css

ローディングしているときの背景のスタイルを書きます。

.loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ddd;
        z-index: 999;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
}

js

ローディング部分を生成してsetTimeoutで設定されている時間がきたらローディングをやめて通常の画面を見せる処理になります。

jQuery(function () {
        var Wheight = jQuery(window).height();
        jQuery('body').css("height", Wheight);
        jQuery('.wrap').prepend('<div class="loading"><div class="content"><img src="loading.gif" alt=""></div></div>');
        setTimeout(function(){
                jQuery('.loading').fadeOut(500);
        }, 3000);
});    
</script>

サンプル