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

javascript

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

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>

サンプル

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

javascript jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました