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

Posted on 2020/09/03 by 下駄

こんにちわ。

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

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

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

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

本日のIT謎掛け

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

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

そのココロは・・・

読んでる（4出る）途中。

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

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

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

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

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

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

<head>
  ..
  <script src="../src/loading.js"></script>
</head>

<head>

</head>

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

var loading = new $$loading({});
loading.view();

1 2	var loading = new $$loading({}); loading.view();

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

loading.hide();

1	loading.hide();

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

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

var loading = new $$loading({
  parent : document.querySelector(".contents")
});

var loading = new $$loading({

parent : document.querySelector(".contents")

});

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

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

Program JavaScript, OSS, ライブラリ