【jQuery】Ajaxのローディング時に、くるくる(スピナー)を表示

Ajax通信をウェブサイトに実装している場合、Ajax通信がローディング中は、画面上にくるくる(スピナー)などの表示があると、サイト閲覧者にとってローディング中ということが理解でき、良いデザインだと思います。

今回は、そのような場合に使用できるソースコードの例となり、jQueryを利用しAjax通信のローディング中にスピナーを表示させます。

Ajax通信のローディング中に、スピナーを表示する例

以下がjQueryを利用したソースコードの例となります。

例では、「Click 」ボタンを押すと、Ajax通信を行います。そして、ローディング中には、スピナーがある全画面を覆うオーバーレイを表示し、Ajax通信が終了するとオーバーレイを非表示にします。

See the Pen mxmvbV by yic666kr (@yic666kr) on CodePen.

ソースコードの説明

以下は、例のソースコードのポイントとなる箇所となります。

Ajax通信のリクエストを送る前に、関数を実行|ajaxSendメソッド

ajaxSendメソッドでは、Ajax通信を行う直前に実行させたい処理を、コールバック関数で設定することが出来ます。

例のソースコードでの箇所

jQuery(function($){
    $(document).ajaxSend(function() {
        $("#overlay").fadeIn(300); 
    });
    
    // 以下省略
});

今回の例では、ajaxSendメソッドのコールバック関数内で、デフォルトで非表示としているオーバーレイの要素に対して、fadeInメソッドを指定することで、Ajax通信のローディング中にスピナーを表示します。

非同期処理を行う|doneメソッド

doneメソッドでは、ajaxメソッドなどの処理が正常に終了した後に実行させる関数を指定できます。それによって非同期処理が可能となります。

例のソースコードでの箇所

jQuery(function($){
	// 上略
        
	$('#button').click(function(){
		$.ajax({
			type: 'GET',
			success: function(data){
				console.log(data);
			}
		}).done(function() {
			setTimeout(function(){
				$("#overlay").fadeOut(300);
			},500);
		});
	});	
});

今回の例では、doneメソッドのコールバック関数に、オーバーレイの要素に対して、fadeOutメソッドを指定し非表示にします。

そのことにより、Ajax通信の処理中にはスピナーが表示され、処理終了後にはスピナーが非表示となります。

なお、Ajax通信の処理が一瞬で終わってしまうと、スピナーも一瞬しか表示されず分かりづらいです。

そのため、doneメソッドで指定しているスピナーを非表示にする処理を、setTimeoutメソッドを使用し、少し遅らせています。

その他のソースコードの箇所

今回の例で使用した、その他のjQueryや、CSSの箇所については、以下のリンク先を参考にしてみてください。

ajaxメソッドについて

スピナーのソースコードについて

オーバーレイのソースコードについて

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。