模写修行メディア

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

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

この記事をシェア:

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

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

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

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

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

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

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

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

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

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

サーバーの見直し

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

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

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

画像や動画の最適化

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

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

これらを行いましょう。

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

HTMLのsrcset属性やpictureタグを使ったレスポンシブイメージを解説CSSの背景画像を最適化!Retinaディスプレイ(高解像度)対応する方法

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

  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を利用し、固定配置しています。

注意!
kvの高さを100vhにしていますが、実際はspのアドレスバーを考慮し、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);
  });
}

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


//ローディング非表示処理
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】

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

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

株式会社八百彦本店

株式会社八百彦本店

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

84.Paris

84.Paris

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

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

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

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

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