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

2020年9月3日

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

t f B! P L
日々、ユーザーインターフェイスの効率化を研究している、ユゲタです。 ある案件で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

このブログを検索

プロフィール

自分の写真
プログラミングとサーバーを心の底から楽しむクリエーターです。 経営者であり、開発者でもありますが、得意としているのは、アイデア創出で、出来高は無限大です。

ブログ アーカイブ

QooQ