日々、ユーザーインターフェイスの効率化を研究している、ユゲタです。
ある案件でwebシステムを作って、そのページを表示する時に、少し複雑なデータベースからデータを引っ張ってきて表示をさせる場面があったんですが、サーバーサイドでページ読み込み前にデータ読み込みをすると、表示するまでに時間がかかり、まるでハングアップしているのかという感じになるので、
javascriptのajaxを使って、ページ読み込み後にデータ読み込みをしてみたところ、データ読み込みが完了するまでは、データがない状態になり、その間にデータ追加などの操作をされると、データが破壊されてしまう可能性もある。
そんな時は、ページの初期表示をしておいて、ぐるぐる回るアイコンを表示すれば、データを読み込んでいるような、感覚になるので、汎用的に使えるloadingライブラリを作っておくことにした。
本日のIT謎掛け
「Now loading」と、かけまして・・・ 「ラッキーナンバーが4の人のサイコロを振った直後」と、ときます。 そのココロは・・・ 読んでる（4出る）途中。Loadingライブラリの紹介
とにかく、何も考えずに、このライブラリをセットして、簡単に使用できるようにしたかったんですが、汎用性と、機能性と、簡易性を兼ね備えたライブラリにしてみました。 デザインも、当たり障りのない、無味無臭にすることで、よほどこだわらない限りは、どんなwebページでも使えるように、しておきました。
githubで公開しているので、WEBエンジニアの方で使いたい方はお好きにどうぞ。
使い方
githubよりcloneしたディレクトリ内にあるsrcフォルダ内がソースコードになります。 その中の、loading.jsをheadタグ内にscript読み込みしておき、<head>
..
<script src="../src/loading.js"></script>
</head>
任意箇所で、loading表示をさせると、読み込み中画面になります。
var loading = new $$loading({});
loading.view();
また、ページの読み込みが完了した場合は、書きを実行するだけです。
loading.hide();
loading変数が引き継げない場合は、都度newしてインスタンスを作ってもらっても構いません。
最後に
任意のelement内でloading表示をしたい場合もあるかと思って、new宣言する箇所に、対象のelementを記述すると、そうした使い方もできるようにしておきました。var loading = new $$loading({
parent : document.querySelector(".contents")
});
システムを作る時に、毎回、こんなコードを書いているのも無駄なので、自分ライブラリに追加しておきました。
う〜〜〜ん、効率化いいですねえ。
0 件のコメント:
コメントを投稿