【初心者向け】超簡単!JavaScript(jQuery)を使ってローディングを実装する方法

2019-08-28
Writing by Jyu

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

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

 

また、Googleからも2018年1月に「Speed Update」の公式発表がありました。

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

 

これらのデータから、いかに表示速度が重要かがわかります。
ですが、サイトの仕様上どうしても、ファイル容量が大きくなってしまうこともあります。その際に、表示速度から受ける影響をいかに抑えるか、その対策が重要になってきます。

対策の一つのとして、ローディングの導入があります。このローディングですが、時間設定など、慣れないうちは手こずることも多いかと思います。そこで今回は、JavaScript(jQuery)を使ったローディングの実装方法を紹介したいと思います。

TOPICS

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

ローディングを導入する前に確認すべきことがあります。

それは「ローディングを導入すべきか」ということです。読み込み時間がたいしてかからないのであれば、ユーザビリティ的にローディングは導入しないほうが良いです。ファイル容量を小さくするための出来る限りの対策をしても時間がかかる場合、ローディングの導入を検討しましょう。

 

まずは表示速度で改善出来るところはないか考えましょう。
最低限、以下の項目は、見直しましょう。

  • 画像や動画の最適化
  • CSS, JavaScriptファイルの軽量化
  • HTTPリクエストの回数の減らす

 

速度改善は今回紹介するもの以外にも検索すれば原因や対策、改善方法がたくさん出てきます。興味のある方はご自身で調べてみてください!

 

画像や動画の最適化

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

 

画像
適切なサイズにリサイズし、圧縮を行いましょう。
よく必要以上に大きい画像を使用しているサイトを見かけますが、キービジュアルなどで画面いっぱいに表示する画像でも横幅2000px程度で問題ありません。

 

動画
動画も画像同様、圧縮はマストです。
動画の最適化に関しては、こちらの記事でも触れていますので、チェックしてみて下さい!

CSS, JavaScriptファイルの軽量化

規模の大きいサイトや複雑なサイトなどを制作していると、どうしてもコード量や外部ファイルが増えてしまいがちです。CSSやJavaScripファイルも数が増えれば、それなりの容量になってしまいます。改行やインデント、スペースなどを消すだけでも多少容量は変わります。プラグインなどではminify化されたファイルが用意されてることも多いです。
また、minify化を行う際は、コメントアウトが削除されるツールか確認しましょう。削除されたコメントアウトは、元に戻した際も復元されません。軽量化前のファイルは保存しておくことをお勧めします。

HTTPリクエストの回数の減らす

HTTPリクエストは画像やファイルなど、全てのリソースに対して行われます。
また、サイトを読み込む際の多くの時間がここに使われます。

したがって、不必要な画像やファイルを削除することで、HTTPリクエストの回数を減らし、表示速度を短縮することができます。

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

ユーザの環境によって読み込みまでにかなりの時間がかかる場合、読み込みが完了するまでローディングを表示していたら離脱されてしまう可能性があります。従って、あまりに時間がかかるようであれば途中でローディングを切り上げるようにします。

 

ですので、今回の仕様は以下のようにしたいと思います。

  • 10秒以内で読み込みが完了した場合、そのままローディングを終了させる。
  • 10秒経過した場合、強制終了させ、コンテンツを表示する。

 

はじめに、こちらのデモをご覧ください。

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

 

HTMLを記述

以下が、HTMLコードとなります。

 

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

 

HTMLに関しては、かなりシンプルです。

こちら解説はいらないですね!

CSSを記述

以下が、CSSコードとなります。

 

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

#loading img{
  width: 100px;
}


@media screen and (min-width: 768px) {
  #loading img{
    width: 120px;
  }
}

 

それではCSSの解説をしていきたいと思います。

 

#loading箇所
#loadingは、ローディング画面の領域になります。
width: 100vw, height: 100vhを指定し、画面いっぱいに表示されるようにします。background-colorは、ご自身のサイトデザインに合わせ設定してください。

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

ローディング中はローディング画面以外のコンテンツを見せたくないので、position: fixedを使用し固定配置します。top, leftともに 0 を指定してください。最後にz-indexを指定し、最前面に表示されるようにします。

 

#loading img 箇所
#loading imgでは、ロゴのサイズを指定しています。

JavaScriptを記述

以下が、全体のJavaScriptコードとなります。

 

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

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

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

 

それではJavaScriptコードをみていきましょう。

 

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

 

解説順が上下しますが、まずは「ローディングの非表示処理」から解説していきたいと思います。ここでは、ローディング非表示処理であるendLoading関数を作成し、呼び出すだけで、非表示処理が行われるようにしています。処理内容も簡単でfadeOutを使用し、ロゴと背景を時間差で非表示にするだけです。fadeOutメソッドは引数の設定が可能で、この引数を利用し、「ロゴを1秒かけ非表示にし、その後0.8秒かけて背景を非表示にする」といった時間差処理を実装します。設定できる引数は、以下の通りです。

fadeOut(スピード, イージング, コールバック関数);

今回のデモでは、スピードとコールバック関数を指定しています。コールバック関数を指定することで、一つめの処理が完了したらコールバック関数に指定した次の処理を実行するといったことが可能になります。つまり、はじめに #loading img(ロゴ)を1秒かけ非表示にし、この処理が完了したら、指定したコールバック関数の処理である #loading(背景) を0.8秒かけて非表示にする 処理が実行される流れになります。このようにコールバック関数を利用することで時間差処理を実装することができます。fadeOutメソッドに関わらず、コールバック関数はよく使用しますので、覚えておいてくださいね!

 

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

 

続いて、読み込みが完了した際の処理をみていきましょう。

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

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

 

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

 

最後に、10秒経過した際の強制終了処理をみていきたいと思います。
ここではsetTimeoutメソッドを使用して、10秒後にendLoading関数を呼び出し、ローディングを終了させます。

 

setTimeoutメソッドは、一定時間後に一度だけ指定した処理を行うものです。
こちらも引数の設定が可能で、第一引数に実行したい関数、第二引数に待機時間(*ms)を指定します。そうすることで、第二引数の待機時間後に、第一引数に指定した関数を一度だけ実行するといったことが可能になります。なお、待機時間はミリ秒で指定しますので、ご注意ください!

 

setTimeout(呼び出す関数, 待機時間);

一つ前に解説した、$(window).on(‘load’,function () {});は、読み込みが完了した段階で処理が実行されます。ですので、読み込みに20秒かかればその20秒間はローディングが表示された状態になります。はじめに説明したように、ローディングの表示にも限界があり、長くても10秒以内に抑えたいところです。ですので、setTimeoutを利用し、読み込み完了に関わらず10秒後にendLoading関数を呼び出し、強制終了させることで、何十秒もローディングが表示され続けるといった挙動を防いでいます。

 

以上で、デモの実装が完了となります。
とても簡単でしたよね!

コピペOKですので、みなさん是非試してみてください!

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

https://icons8.com/preloaders/
ローディングアイコンを作成できる有名なサービスです。
パターンもかなり豊富です。

 

http://loadergenerator.com/
パターンは少ないですが、すごく簡単にカスタマイズすることができるサービスです。
時間がないときなど、かなり重宝します。

 

https://pixelbuddha.net/freebie/flat-preloaders
お洒落かつ、ユニークな動きのものが多く、ユーザーを引き止めるには効果ありです。
スクエア型はこちらになります。

 

https://tobiasahlin.com/spinkit/
シンプルでおしゃれですね。
こちらHTMLとCSSのみで作られています。

 

https://projects.lukehaas.me/css-loaders/
こちらもSpinKit同様、HTMLとCSSのみで作られています。

こちらで紹介したサイト以外にも便利なサイトはたくさんありますので、ご興味のある方はご自身で調べてみてください!*ご利用の際は、必ずライセンスをお読みください。

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

https://www.beproud.asia/
読み込みに合わせて表示を切り替えるローディングはよく見かけますが、こちらサイトイメージにマッチしていてとてもかっこいいです。
背景の漢字の切り替えがかなり斬新で、引き込まれますね!

 

https://www.vanilla-air.com/jp/destination/hokkaido-food/
バニラエアライン北海道旅のWEBサイトです。
ローディングアイコンをそのままキービジュアルに使用するサイトも多いですね。

 

https://www.yaohiko.nagoya/
ローディング時にメッセージを表示し、読ませることでユーザーの体感時間を短縮させることもできます。

 


https://www.84paris.com/en/
こちらパリに拠点を置く広告代理店のWEBサイトになります。
サイトイメージに合っていればこんなローディングもありですね。

ローディングだけでなく、制作実績の映像もかなりかっこいいので、是非チェックしてみて下さい!

参考URL

-【Pingdom】 Does Page Load Time Really Affect Bounce Rate?
https://royal.pingdom.com/page-load-time-really-affect-bounce-rate/

-【Google】 ウェブマスター向け公式ブログ
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html