jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。
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]
<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]
ここではボタンですが、リンクに onclick を仕込むとリンク先を表示する際にローディング画面が表示されます。
前のポストである「PEAR Pagerにonclick」でで使用した onclick でも設定可能です。
うーん、お手軽。素晴らしい。
[tgAmazonItemLookup asin="B009C73XMO" related="1"]