トップへ戻る
BLOGS

JSローディング画面の実装方法

JSローディング画面の実装方法

今回はページを読み込む際に現れるローディング画面を作成したいと思います。

まずはHTMLから書いて行こうと思います。

<div id="loading" class="loading active">
  <div class="loadingText">Loading....</div>
</div>
<main>
 <h1>ここがローディング後に現れる画面です。</h1>
</main>

そしてこのままでは

<div class=”loadingText”>Loading….</div>

ここが表示されてしまっているのでこちらをCSSで消しておきます。

メインはついでなので見やすくしておきます。

main {
  padding: 20px;
  margin: 50px auto;
  max-width: 1000px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  background-color: #eee;
  /* height: 200vh; */
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ;
}
.loading.active {
  opacity: 1;
  visibility:visible;
}

ポイントとしては

opacity: 0;
visibility: hidden;

ここの記述をクラスを付与することで変更します。間違えやすいのは

display:none;をしてしまうとtransitionが効かず

急に現れるのでここはvisibilityにしておくことです。さあそしてJSです。

window.addEventListener("load", function() {
  setTimeout(function() {
    document.getElementById("loading").classList.remove("active");
  }, 1000);
})

addEventListener(“load”, function()

の記述でローディング(画面を読み込んだら)したらというきっかけを造ります。

そして.classList.remove(“active”);でクラスを消すので

先に設定したローディング画面を消してくれることになります。

そしてこれではあまりにも一瞬で消えてしまうのでわずかに目にとまるように、時間をセットしておきます。それが

setTimeout(function() {
document.getElementById(“loading”).classList.remove(“active”);
}, 1000);
 

の部分ですね。

またあまりにも大きなサイトだと読み込みに時間がかかってしまうので

いつまでたってもローディング画面が消えない事態になってしまうこともあるので、保険として同じ記述を用意しておきローディングフックの外で定義しておきます。

せっかくなので同じ記述は関数化してきれいに書いて終えます。

function loaded() {
  document.getElementById("loading").classList.remove("active");
}
window.addEventListener("load", function() {
  setTimeout(loaded, 1000);
})
setTimeout(loaded, 3000);

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA