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

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

趣旨

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

趣旨

当記事について

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

1.ローディング画像とは?

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

Loading画像

ローディング画像の目的

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

2.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サンプルページ
PJUtilサンプルページ

PJUtilの機能

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

PJUtilダウンロードサイト(GitHUB)

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

3.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の解説

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

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

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

4.色々なローディング画像のダウンロードサイト紹介

ローディング画像はフリーでダウンロードできるので、好きな画像を探してみて下さい。
何個か無料でローディング画像をダウンロード出来るサイトをご紹介しておきます。

ローディング画像ダウンロードサイト

みんなの知識 ちょっと便利帳

フリーで使えるローディング画像各種
https://www.benricho.org/loading_images/transparent01.html

シンプルがローディング画像から独創的でかっこよいローディング画像まで揃って言います。品揃えも豊富です。
PJUtilもここの画像を利用しています。

無料素材サービス CMAN

フリーで使えるローディング画像各種
https://sozai.cman.jp/icon/runtime/watch/

シンプルで可愛いローディング画像が揃っています。

無料素材倶楽部

フリーで使えるローディング画像各種
http://sozai.7gates.net/docs/loading-animated-gif/

シンプルなローディング画像が揃っています。色合いが豊富です。

ローディング画像の変更方法

PJUtil/img/loading.gifを好きな画像に置き換えて下さい。

本日は以上です。少しでも記事がお役に立てば幸いです。

がんばろー

広告




スポンサーリンク
広告




広告




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告