🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

JavaScript

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

Author:Jyu

この記事の目次

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

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

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

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

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

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

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

それは「ローディングを導入すべきか?」ということです。読み込み時間がたいしてかからないのであれば、ユーザビリティ的にもローディングは導入しないほうが良いです。

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

最低限、以下の項目は、見直しましょう。

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

後半2つに関しては、大きな改善は見込めませんが、一応紹介しておきます。

サーバーの見直し

webサイトの場合はレンタルサーバーで運用することが多くなると思います。どこのレンタルサーバーを使うかで、表示速度が体感できるほど変わることはあります。

以前、お名前.comの旧サーバーからXサーバーへ変更した際も、体感できるレベルで速くなりました。

お名前.comの新プラン(RSプラン)やXサーバーを使っていれば、サーバーが問題で遅くなることはないと思われます。格安のサーバーを使う際は注意が必要です。

画像や動画の最適化

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


画像

適切なサイズにリサイズし、圧縮を行いましょう。

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


動画

動画も画像同様、圧縮はマストです。

動画の最適化に関しては、下記の記事でも触れていますので、チェックしてみて下さい!

ファイルの軽量化

規模の大きいサイトや複雑なサイトなどを制作していると、どうしてもコード量や外部ファイルが増えてしまいがちです。

CSSやJavaScripファイルも数が増えれば、それなりの容量になってしまいます。改行やインデント、スペースなどを消すだけでも"多少"容量は変わります。プラグインなどではminify化されたファイルが用意されてることも多いです。

また、minify化を行う際は、コメントアウトが削除されるツールか確認しましょう。削除されたコメントアウトは、元に戻した際も復元されません。軽量化前のファイルは保存しておくことをお勧めします。

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

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

かなり規模が大きいサイトでない限り、CSSは1つにまとめるなどすると、"多少"速くなるかもしれません。

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

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

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

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

HTMLを記述する

html
<div class="loading js-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;
}

.loading img{
  width: 100px;
}

.loading

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

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

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

また、今回はkvの高さをheight:100vh;と指定していますが、実際はspのアドレスバーを考慮し、JavaScript側で高さを取得し指定します。

.loading img

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

JavaScriptを記述する

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);
  });
}

少し長いので、分割して解説します。


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

解説順が上下しますが、まずは「ローディングの非表示処理」から解説します。

ここでは、ローディング非表示処理であるendLoading関数を作成し、呼び出すだけで、非表示処理が行われるようにしています。

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


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

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

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

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


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

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

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

setTimeoutメソッドは、一定時間後に一度だけ指定した処理を行うものです。

引数の設定が可能で、第一引数に実行したい関数、第二引数に待機時間(*ms)を指定します。こうして、第二引数の待機時間後に、第一引数に指定した関数を一度だけ実行されます。

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

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

ここで紹介するサイト以外にも便利なサイトはあるので、興味のある方は調べてみてください。(ご利用の際は、必ずライセンスをご確認ください。)

また、ローディングアイコンはCSSで自作しても良いと思います。

Preloaders.net

Preloaders

参考サイト

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

Free flat animated preloaders for websites

flatPreloaders

お洒落かつ、ユニークな動きのものが多くあります。

SpinKit

SpinKit

シンプルでおしゃれですね。HTMLとCSSのみで作られています。

Single Element CSS Spinners

cssLoaders

こちらもSpinKit同様、HTMLとCSSのみで作られています。

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

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

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

ギャラリーサイト

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

be-proud

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

株式会社八百彦本店

株式会社八百彦本店

サイトリンク

ローディング時にメッセージを表示し、読ませることでユーザーの体感時間を短縮させています。

84.Paris

84-paris

サイトリンク

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

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.