JavaScriptでローディング画像を表示するにはどうすれば良いの?
PJUtilを使えば簡単にローディング画像を表示出来るよ。やり方を説明するね。
JavaScriptでローディング画像を表示するのは割りと手間なので、自作ライブラリを用意しました。
ここでは、JavaScriptでゼロからローディング画像を表示する方法と、ぴよ猫自作ライブラリのPJUtilでローディング画像を表示する方法を紹介します。
1.ローディング画像とは?
ローディング画像とは、ボタンを押すとたまに現れくるくる回っているこいつのことです。
↓↓↓
ローディング画像の目的
- ボタンが押されたことをユーザーに通知する
ボタンを押してもノーリアクションだと、人はボタンを押したか不安になるので、長い処理を行う場合はローディング画像を表示して、ボタンが押されたことをユーザーに通知します。 - ユーザーを退屈させない
人は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の機能
分類 | プロパティ/メソッド | 説明 |
---|---|---|
コンストラクタ | 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の解説
やっていることは単純です。
- 初期状態が非表示のローディング画像を配置しておく
<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をご利用下さい。
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を好きな画像に置き換えて下さい。
本日は以上です。少しでも記事がお役に立てば幸いです。