WEBページを読み待ちの時に画面に表示するLoadingライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

日々、ユーザーインターフェイスの効率化を研究している、下駄です。
 

ある案件でwebシステムを作って、そのページを表示する時に、少し複雑なデータベースからデータを引っ張ってきて表示をさせる場面があったんですが、サーバーサイドでページ読み込み前にデータ読み込みをすると、表示するまでに時間がかかり、まるでハングアップしているのかという感じになるので、
 

javascriptのajaxを使って、ページ読み込み後にデータ読み込みをしてみたところ、データ読み込みが完了するまでは、データがない状態になり、その間にデータ追加などの操作をされると、データが破壊されてしまう可能性もある。
 

そんな時は、ページの初期表示をしておいて、ぐるぐる回るアイコンを表示すれば、データを読み込んでいるような、感覚になるので、汎用的に使えるloadingライブラリを作っておくことにした。

本日のIT謎掛け

「Now loading」と、かけまして、
 

「ラッキーナンバーが4の人のサイコロを振った直後」と、ときます。
 

そのココロは・・・
 

読んでる(4出る)途中。

Loadingライブラリの紹介

とにかく、何も考えずに、このライブラリをセットして、簡単に使用できるようにしたかったんですが、
 

汎用性と、機能性と、簡易性を兼ね備えたライブラリにしてみました。
 

デザインも、当たり障りのない、無味無臭にすることで、よほどこだわらない限りは、どんなwebページでも使えるように、しておきました。
 


 

githubで公開しているので、WEBエンジニアの方で使いたい方はお好きにどうぞ。

使い方

githubよりcloneしたディレクトリ内にあるsrcフォルダ内がソースコードになります。
 

その中の、loading.jsをheadタグ内にscript読み込みしておき、
 

任意箇所で、loading表示をさせると、読み込み中画面になります。

また、ページの読み込みが完了した場合は、書きを実行するだけです。
 

loading変数が引き継げない場合は、都度newしてインスタンスを作ってもらっても構いません。

最後に

任意のelement内でloading表示をしたい場合もあるかと思って、new宣言する箇所に、対象のelementを記述すると、そうした使い方もできるようにしておきました。
 

 


 

システムを作る時に、毎回、こんなコードを書いているのも無駄なので、自分ライブラリに追加しておきました。
 

う〜〜〜ん、効率化いいですねえ。

github

https://github.com/yugeta/loading

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です