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

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したい時はぜひ参考にしてもらえると幸いです。

3 thoughts on “脱jQuery！素のJavaScriptでローディング画面を実装する方法”

universe 2021/02/02 at 00:51

はじめまして、お忙しい中恐れ入ります。
最近いくつかのサイトにて脱jqueryでJavaScriptでのローディング画面が解説されていますが、正直私にはjqueryが良いのかJavaScriptが良いのか（SEO的にもサイト表示速度的にも）分からないのですが、JavaScriptの方が良いのでしょうか？

お忙しい所大変恐れ入りますが、ご教授いただけましたら幸いです。

Reply ↓
1. himecas Post author2021/02/02 at 15:59
  
  コメントありがとうございます。
  どちらもあくまで手段なので、目的によって使い分けると良いかと思います。
  
  「jQueryはオワコン」みたいな風潮はありますが、実際に現場ではまだまだ現役で使われていますし、どちらが良いという話ではないと思っています。
  
  例えば、JavaScriptによる実装がローディング画面のみだった場合は、素のJavaScriptで書いた方が容量的に少なくて済みますしコードも複雑じゃないですね。
  
  jQueryはライブラリ(80KBくらい)を読み込む必要があり、一通りのブラウザを考慮しているため、どうしても処理速度は劣ります。そのため、サイトの表示速度にシビアな案件では、素のJavaScriptを選択した方が良いかもしれません。
  
  ただ、複数箇所でJavaScriptによる処理が必要で、素のJavaScriptで書くと複雑になってしまう場合は、jQueryでやった方がわかりやすく簡単な場合もあります。
  
  どちらを選択するかは、案件の方針次第になってきますね。これから勉強を始める場合は、jQuery→素のJavaScriptの順の方が挫折しにくいとは思います。
  
  なお、SEO的にはどちらが有利とかはありません。
  
  Reply ↓
  1. universe 2021/02/03 at 14:19
    
    himecas様、ご返信ありがとうございます。
    どちらでもSEO的にはそう変わらないのですね。。。
    昨今jqueryが仰るようにオワコンみたいな感じで記載されていらっしゃるブログなどが意外と多くて・・・。えっ、そうなの？
    と思いこちらにコメントさせていただきました。
    （すみません）
    
    ご返信いただいて、
    なんか安心しました。
    
    ＞jQueryはライブラリ(80KBくらい)を読み込む必要があり、一通りのブラウザを考慮しているため、どうしても処理速度は劣ります。そのため、サイトの表示速度にシビアな案件では、素のJavaScriptを選択した方が良いかもしれません。
    ↑
    
    たしかにですね。
    
    お忙しい中、ご返信頂きまして本当にありがとうございます。
    感謝です。
    
    Reply ↓

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