jQuery の ajax 処理で Now Loading の画像を表示する方法

2016/02/09

Ajax のように非同期処理のイベントを実行する場合、開始・終了を明示的に表現してあげる手法の一つとして、ぐるぐる回るローディング画像を用いる方法があります。大抵1つの処理にローディング画像を取り入れると、他の処理においても足並み揃えて取込みが必要になったりもします。

今回は、簡単にぐるぐる回るローディング画像を利用するために、Javascript と CSS のみで実装し、HTML 上に手を加えず表示するサンプルをご紹介します。

実装するにあたり用意するもの

ローディング画像のみ!一般的にぐるぐる回転する画像が用いられるので、その画像を用意します。フリー素材でたくさん落ちていますが、色味や形状など好みに合った素材を探すのは大変です。そこで、このぐるぐる回る画像をジェネレートできるサイトがあるので、必要であればこちらのサイトをご利用ください。

Loader Generator

サイト名そのまんまです。
私がこのサイトで作成したローディング画像がこちらです。

now loading
Loader Generator のおかげで、簡単に作ることができました。

コードサンプル

最初に述べたように、HTML は何も手を加えません。jQuery にて HTML 部分を出力してあげるイメージです。まずは Javascript。

そして CSS。dispLoading 関数で出力している HTML と、こちらの内容を調整するだけで、いくらでも表現方法を変えることができます。

Now Loading 表示サンプル

ローディング画像の表示が分かるように、サーバ側の処理は単に3秒ウエイトするだけの処理です。

Javascript も CSS も共通処理として定義してしまえば、関数呼び出しだけで実装できますので、参考にしてみてください。

jQuery のファイルは CDN から取得しよう

jQuery の JavaScript ファイルは Google の CDN で提供されています。リンクを貼り付けるだけで利用できるので、jQuery ファイルをダウンロード&アップロードする必要がありません。インターネット環境上で公開するサイトであれば有効活用できると思います。

PAGE TOP ↑