JavaScriptでローディング画像を表示する自作ライブラリPJUtilのご紹介

JavaScriptでローディング画像を表示するにはどうすれば良いの？

PJUtilを使えば簡単にローディング画像を表示出来るよ。やり方を説明するね。

当記事について

JavaScriptでローディング画像を表示するのは割りと手間なので、自作ライブラリを用意しました。
ここでは、JavaScriptでゼロからローディング画像を表示する方法と、ぴよ猫自作ライブラリのPJUtilでローディング画像を表示する方法を紹介します。

【目次】

ローディング画像とは？
PJUtilでローディング画像を表示する方法
JavaScriptでローディング画像を表示する方法
色々なローディング画像のダウンロードサイト紹介

１．ローディング画像とは？

ローディング画像とは、ボタンを押すとたまに現れくるくる回っているこいつのことです。
↓↓↓

ローディング画像の目的

ボタンが押されたことをユーザーに通知する
ボタンを押してもノーリアクションだと、人はボタンを押したか不安になるので、長い処理を行う場合はローディング画像を表示して、ボタンが押されたことをユーザーに通知します。
ユーザーを退屈させない
人は3秒くらいしか待てません。ボタンを押しても何も起きないと退屈してくるので、長い処理を行う場合には退屈がまぎれる様にローディング画像を表示します。

２．PJUtilでローディング画像を表示する方法

コード(html/JavaScript)

<!DOCTYPE html>
<html lang="ja">
<link rel="stylesheet" href="./css/pjutil.css?ver=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type='text/javascript' src='./js/pjutil.js?ver=1.0'></script>
<script>
var pjloader = null;

$(document).ready(function() {
  pjloader = new PJLoader("暫くお待ちください。");
});

</script>
<input type="button" value="startLoading" onclick="pjloader.start()">
<input type="button" value="startLoading" onclick="pjloader.stop()">
</html>

PJUtilサンプルページ

PJUtilの機能

分類	プロパティ/メソッド	説明
コンストラクタ	PJLoader(msg)	ローディング画像制御クラスPJLoaderを生成します。引数：msg = ローディング中に表示するメッセージ
プロパティ	speed	ローディング画像を表示するまでの時間(ミリ秒) デフォルト = 500ミリ秒
メソッド	start()	ローディング画像を表示します。
メソッド	stop()	ローディング画像を非表示にします。

PJUtilダウンロードサイト（GitHUB）

https://github.com/shibayu2002/PJUtil.git

３．JavaScriptでローディング画像を表示する方法

コード(html/JavaScript)

<!DOCTYPE html>
<html lang="ja">
<style type="text/css">
<!--
/* ローディング画像 */
#pj_loading{
  position:absolute;
  left:50%;
  top:50%;
  width: 300px;
  margin-left:-200px;
  margin-top:-200px;
  display:none;
}

/* ローディングテキスト */
#pj_loading_text{
  position:absolute;
  left:0%;
  top:50%;
  width:100%;
  margin-left:0px;
  margin-top:-60px;
  font-size: 25pt;
  font-weight: 900;
  color: #0000FF;
  text-align: center;
  display:none;
}
-->
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
// ローディング画像表示開始
loadingStart = function() {
  $("#pj_loading").fadeIn(500);
  $("#pj_loading_text").fadeIn(500);
};

// ローディング画像表示停止
loadingStop = function() {
  $("#pj_loading").fadeOut(500);
  $("#pj_loading_text").fadeOut(500);
};


</script>
<input type="button" value="startLoading" onclick="loadingStart()">
<input type="button" value="startLoading" onclick="loadingStop()">
<img id="pj_loading" src="img/loading.gif" title="loading" alt="loading">
<div id="pj_loading_text">暫くお待ち下さい。</div>
</html>

ローディング画像表示JavaScriptの解説

やっていることは単純です。

初期状態が非表示のローディング画像を配置しておく
<img id="pj_loading" src="img/loading.gif" title="loading" alt="loading">
<div id="pj_loading_text">暫くお待ち下さい。</div>
ローディング処理開始時に画像を表示する
$("#pj_loading").fadeIn(500);
$("#pj_loading_text").fadeIn(500);
ローディング処理終了時に画像を非表示にする
$("#pj_loading").fadeOut(500);
$("#pj_loading_text").fadeOut(500);

単純な処理ですが、全てのページにこのソースを実装していたらメンテが大変なので、共通ライブラリに纏めることをお薦めします。
良ければ、前述のPJUtilをご利用下さい。