【超簡単】JavaScript(jQuery)を使ってローディングを実装する方法！

少し前の記事ですが、webサイト監視サービスの「Pingdom」から読み込み時間による直帰率のデータが公開されています。読み込み時間ごとの直帰率のデータは以下のようになっています。

• 読み込み時間が2秒以内の場合、直帰率は9％。
• そして3秒から大幅にアップし、5秒の時点で38％に達する。

また、Googleからも2018年1月にSpeed Updateの公式発表がありました。こちらは、「これまでデスクトップのみ読み込み速度を検索ランキングを構成する要因としていましたが、今後モバイルも対象にしますよ」といったものです。※特別遅くない限り影響は受けないようです

これらのデータから、表示速度が重要かがわかります。しかし、サイトの仕様上どうしても、読み込みに時間がかかってしまうこともあります。その際に、表示速度から受ける影響をいかに抑える対策が重要になります。

この記事では、その対策の一つでもあるローディングの実装方法について紹介します。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

ローディングを導入する前に考慮すべきこと

まずは、本当に「ローディングを導入すべきか？」を考える必要があります。読み込み時間があまりかからないのであれば、ローディングは邪魔になる場合もあります。

読み込みが遅い原因として、サーバーやファイルサイズ関連の問題があります。まずはこれらの対策を行い、それでも遅い場合はローディングの導入を検討しましょう。

• サーバーのスペック
• 画像や動画の最適化

最低限、これらの項目は、見直しましょう。

サーバーの見直し

webサイトの場合はレンタルサーバーで運用することが多くなると思います。サーバーのスペックによって、表示速度が体感できるほど変わることもあります。

以前、お名前.comのSDプラン(今はない旧プラン)からエックスサーバーに移行した際は、体感できるほど速くなりました。

お名前.comのRSプランやエックスサーバーであれば、サーバーが問題で遅くなることはありません。格安のサーバーを使う場合、遅くなることもあります。

画像や動画の最適化

画像や動画の容量は、表示速度に大きく関わってきます。従って、まずは容量が必要以上に大きくないか確認しましょう。

• 画像や動画圧縮
• 最適なサイズを表示

これらを行いましょう。

圧縮はオンラインのツールやタスクランナーで行うと良いです。

最適なサイズを表示する方法は、上の記事で詳しく紹介しています。コーディングの中では中級者向けの内容ですが、覚えておいた方が良いことです。

1. HTMLを記述する
2. CSSを記述する
3. JavaScriptを記述する

この流れで紹介します。

JavaScript(jQuery)を使ってローディングを実装してみる

• 10秒以内で読み込みが完了した場合、そのままローディングを終了
• 10秒経過した場合、強制的にローディングを終了

このような仕様で作ります。

ユーザーの環境によっては読み込みまでに時間がかかる場合があります。その際は途中でローディングを切り上げるようにします。

はじめに、DEMOをご覧ください。

※ 今回のDEMOはローディングを導入する必要がないくらい、ファイル容量は小さいので、ローディングはすぐ終わっていまします。

HTMLを記述する

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

ローディングに関係のあるHTMLはこれだけです。

CSSを記述する

.loading{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
}

.loading img{
  width: 100px;
}

.loadingは、ローディング画面の領域です。width: 100vw, height: 100vhを指定し、画面いっぱいに表示されるようにします。

flexboxを使ってロゴを上下左右中央に配置しています。

ローディング中は、ローディング画面以外のコンテンツを見せたくないので、position： fixedを利用し、固定配置しています。

JavaScriptを記述する

//読み込みが完了したら実行
$(window).on('load',function () {
  // ローディングが10秒以内で終わる場合、読み込み完了後ローディング非表示
  endLoading();
});

//10秒経過した段階で、上記の処理を上書き、強制終了
setTimeout('endLoading()', 10000);

//ローディング非表示処理
function endLoading(){
  // 1秒かけてロゴを非表示にし、その後0.8秒かけて背景を非表示にする
  $('.js-loading img').fadeOut(1000, function(){
    $('.js-loading').fadeOut(800);
  });
}

少し長いので、分割して紹介します。

//ローディング非表示処理
function endLoading(){
  // 1秒かけてロゴを非表示にし、その後0.8秒かけて背景を非表示にする
  $('.js-loading img').fadeOut(1000, function(){
    $('.js-loading').fadeOut(800);
  });
}

まずは「ローディングの非表示処理」から紹介します。

endLoading関数はfadeOutを使用し、ロゴと背景を時間差で非表示にしています。fadeOutメソッドは引数の設定が可能で、この引数を利用し、「ロゴを1秒かけ非表示にし、その後0.8秒かけて背景を非表示にする」といった時間差処理を実装します。

//読み込みが完了したら実行
$(window).on('load',function () {
  endLoading();
});

読み込みが完了した際の処理です。

windowオブジェクトに対して、onメソッドを指定しています。onメソッドの第一引数には、イベントを指定することが可能です。loadを指定することで、読み込み完了後、第二引数の処理を行うことになります。

したがって、読み込み完了後にendLoading関数(ローディング非表示処理)が呼び出され、ローディングが終了するといった流れです。

//10秒経過した段階で、強制終了
setTimeout('endLoading()', 10000);

10秒経過した際の強制終了処理です。

setTimeoutメソッドを使用して、10秒後にendLoading関数を呼び出し、ローディングを終了させます。

setTimeoutメソッドは、一定時間後に一度だけ指定した処理を行うものです。第一引数に実行したい関数、第二引数に待機時間を指定します。

この処理がないと、読み込みに20秒かかればその20秒間はローディングが表示された状態になります。ローディングは長くても10秒以内に抑えたいのでこの処理を入れています。

ローディングアイコン作成サイト紹介

ここで紹介するサイト以外にも便利なサイトはあるので、興味のある方は調べてみてください。

👇 CSSで自作する場合の参考記事も載せておきます。

ローディングが使われているサイト紹介

ローディングが使われているサイトを紹介します。

映出目的でローディングを導入しているサイトも多いので、ギャラリーサイトを見るとローディングが使われているサイトはたくさん見つかります。

歯科ホームページ作成【BE PROUD】

サイトのイメージに合った、凝ったローディングを導入しています。

株式会社八百彦本店

ローディング時にメッセージを表示しているサイトはよくあります。

84.Paris

少し長めですが、可愛いローディングです。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！