jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

2012/06/21 2013/11/19

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。

busy.jsで簡単ローディング画面

ダウンロード・設置方法

busy.js (javascript loading indicators)
http://www.netzgesta.de/busy/
こちらからzupファイルをダウンロードします。
登録を求められるので、諦めて登録しましょう（えー）

設置はファイルを解凍するだけでほぼ完成。
jqueryなども使わずに、スタンドアローンで動作します。

使い方

同梱されている各種ファイルの内、click.htmlを眺めてみると、「Viewport」ボタンを押下すると全画面でグルグル回るローディング画面が表示されたので、それを採用してみることとします。

とりあえず、下記のHTMLを作ってみました。

「LOADING!!」ってボタンがあり、押すとローディング画面が表示されるだけです。
"loadSecCount"でローディング画面が表示される時間を設定できます。
マイクロ秒で設定と思ったのですが、違うようです。よく分かりませんでした(^_^;)

<html>
<head>
<title>busy.jsテスト</title>

<script src="./js/busy/cvi_busy_lib.js"></script>
<script type="text/javascript" charset="utf-8">
	var xval, tval, bval, rval, lval;
	var loadSecCount = 50;
	function loading() {
		xval = getBusyOverlay('viewport',{color:'#444444', opacity:0.75, text:'Checking...', style:'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white'},{color:'#fff', size:64, type:'t'});
		if(xval) {
			var cnt=0,tim=100;
			xval.ntime = window.setInterval(function() {
				xval.settext('Now Loading...');
				cnt++; 
				if(cnt>tim) {
					window.clearInterval(xval.ntime);
					xval.remove();
				}
			}, loadSecCount);
		}
	}
</script>
</head>
<body>

<h1>busy.js test</h1>

<input type="button" name="button" onClick="loading()" value="LOAD!!" />

</body>
</html>

<html>

<head>

<title>busy.jsテスト</title>

var xval, tval, bval, rval, lval;

var loadSecCount = 50;

function loading() {

xval = getBusyOverlay('viewport',{color:'#444444', opacity:0.75, text:'Checking...', style:'text-shadow: 0 0 3px black;font-weight:bold;font-size:16px;color:white'},{color:'#fff', size:64, type:'t'});

if(xval) {

var cnt=0,tim=100;

xval.ntime = window.setInterval(function() {

xval.settext('Now Loading...');

cnt++;

if(cnt>tim) {

window.clearInterval(xval.ntime);

xval.remove();

}

}, loadSecCount);

}

</script>

</head>

<body>

</body>

</html>

ここではボタンですが、リンクに onclick を仕込むとリンク先を表示する際にローディング画面が表示されます。
前のポストである「PEAR Pagerにonclick」でで使用した onclick でも設定可能です。

うーん、お手軽。素晴らしい。

[tgAmazonItemLookup asin="B009C73XMO" related="1"]

-Javascript,jQuery
-busu.js, javascript, js, onclick, ライブラリ

: lightbox系プラグイン「Shadowbox.js」で、YouTube動画をオプション付きで埋め込む方法。

プラットフォーム関係なく動画を再生させたかったので、YouTubeにアップして見せることになり、その際に利用したlightbox系のプラグイン「Shadowbox.js」の使い方を忘備録としてポストします。

: 今更だが、IE6?7で透過pngを使えるようにするjavascriptライブラリ「DD_belatedPNG」

本当に今更感がある内容ですが、わざわざ対応しないといけない事案にぶつかったので、 ...

: 「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

以前作成した「クリックしたらツールチップを表示するスクリプト」がQiitaでいい感じに改造されていたのに影響を受け、もう少しだけ上手に書いた(と思う) バージョン2がようやく出来上がったので晒してみたいと思います。

: プルダウンメニュー連動でテキストを切り替えるスクリプトをjQueryで組んでみた

プルダウンメニューを選択した際に指定のテキストを表示させるスクリプトを作って欲しいという要望があったので jQuery で作ってみました。

: 【jQuery】時刻の入力補助スクリプト jquery.tgClockPickTip2 を作ってみた

以前、時刻の入力補助ライブラリを紹介しましたが、さらに使いやすいライブラリ「jQuery UI Time Picker by Francois Gelinas」を発見。その完成度の高さに感動し「ソースを見ないで同じものを作ってみよう！」と練習の意味も込めて、どこまで近づけるか力試しをしてみました。

PREV: PEAR Pagerで javascript の onclick を設定してみる。
NEXT: 復活、キン肉マン

jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

busy.jsで簡単ローディング画面

ダウンロード・設置方法

使い方

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,169)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,490)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (254,926)

【歴史】江戸幕府歴代将軍一覧 (142,957)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,875)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (127,934)