脱jQuery!素のJavaScriptでローディング画面を実装する方法

脱jQuery!素のJavaScriptでローディング画面を実装する方法

脱jQuery!素のJavaScriptでローディング画面を実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 24時間注文・入稿受付OK。実績と信頼の「印刷の通販 グラフィック」
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

jQueryなしでサイトにローディング画面を実装する方法をご紹介いたします。

挙動については以下デモページをご参照ください。

デモページを見る

スポンサードリンク

素のJavaScriptでローディング画面を実装する方法

ステップ1. HTMLのマークアップ

HTMLは以下のように、#loadingにローディング画像、#pageにローディング以外のコンテンツを入れるようにマークアップします。

<div id="loading">
  <figure class="loading-logo">
    <img src="logo.png" alt="">
  </figure>
</div>

<div id="page">
  コンテンツ
</div>

ステップ2. CSSでローディング画面をスタイリング

続いて、CSSでローディング画面を作成します。

#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  transition: all .5s ease;
  background-color: #fff;
  z-index: 99999;
}

#loading.is-loaded {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100vw);
}

.loading-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  -webkit-animation: loadinglogo 1s ease-in-out 0s infinite alternate;
  animation: loadinglogo 1s ease-in-out 0s infinite alternate;
}

@keyframes loadinglogo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#page {
  display: none;
}

#page.is-loaded {
  display: block;
}

後述するJavaScriptで、ページ読み込みが完了したら#loadingと#pageに.is-loadedを追加し、#loadingを非表示、#pageを表示させます。

.loading-logoに付けたアニメーションはロゴの点滅です。

ステップ3. JavaScriptでローディング画面の実装

最後に、JavaScriptでローディング画面を実装します。

<script>
  //ローディングロゴエリアとウインドウの高さを取得
  let loadlogo = document.querySelector('.loading-logo'),
      winH = window.innerHeight;

  //スマホでアドレスバーの分ロゴの位置がずれるので高さを調整
  loadlogo.style.height = winH + 'px';

  //ページ読み込み完了でローディング画面を非表示
  window.addEventListener('load', stopload);

  //10秒経過で強制的にローディング画面を非表示
  setTimeout('stopload()',10000);

  //ローディング画面を非表示にする処理
  function stopload() {
    //ローディング画面とページを取得
    let loader = document.querySelector('#loading'),
        page = document.querySelector('#page');

    //ローディング画面とページにクラスを追加
    page.classList.add('is-loaded');
    loader.classList.add('is-loaded');
  }
</script>

.loading-logoにはCSSで100vhが指定されていますが、これだとスマホの時にアドレスバーの高さ分ロゴの位置がずれてしまうので、アドレスバーよりも内側の高さを取得してheightに指定しています。

ローディング画面を非表示にするための処理はstopload()のところで、ローディング画面とページに.is-loadedというクラスを追加しているだけですね。.is-loadedを追加することにより、CSSで指定した通り#loadingは非表示になって#pageが表示されます。

「window.addEventListener(‘load’, stopload);」で、ページ読み込み完了時にstopload()を実行しています。

また、ページの読み込みがなかなか完了しないと、ずっとローディング画面が出たままなので離脱されてしまう可能性があります。そのため、「setTimeout(‘stopload()’,10000);」で、10秒経過したらローディング画面を強制的に終了しています。

あとがき

jQueryを使ったローディング画面の実装方法は、「サイトの読み込み中にローディング画面を表示する方法」という記事で紹介しています。

jQueryを使わなくても、スクリプトの記述量はそこまで変わらないですね。脱jQueryしたい時はぜひ参考にしてもらえると幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。