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

2020年9月3日

Javascript テクノロジー プログラミング

eyecatch 日々、ユーザーインターフェイスの効率化を研究している、ユゲタです。 ある案件で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") }); システムを作る時に、毎回、こんなコードを書いているのも無駄なので、自分ライブラリに追加しておきました。 う〜〜〜ん、効率化いいですねえ。

github

https://github.com/yugeta/loading

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。