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

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

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

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

これらのデータから、表示速度が重要とわかります。しかし、サイトの仕様上どうしても、読み込みに時間がかかってしまうこともあります。その際に、表示速度から受ける影響をいかに抑える対策が重要になります。この記事では、その対策の一つでもあるローディングの実装方法について紹介します。

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

JavaScriptの勉強ができるおすすめの本やサイト紹介！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

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

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

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

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

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

サーバーの見直し

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

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

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

画像や動画の最適化

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

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

これらを行いましょう。

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

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説 【Retina対応】background-imageを最適化する方法！

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

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秒以内に抑えたいのでこの処理を入れています。

【駆け出しの方へ】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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

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

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

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

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

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

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

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

株式会社八百彦本店

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

84.Paris

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

独学に限界を感じていませんか？