【jQuery】Ajaxのローディング時に、くるくる（スピナー）を表示
Ajax通信をウェブサイトに実装している場合、Ajax通信がローディング中は、画面上にくるくる（スピナー）などの表示があると、サイト閲覧者にとってローディング中ということが理解でき、良いデザインだと思います。
今回は、そのような場合に使用できるソースコードの例となり、jQueryを利用しAjaxのローディング中にスピナーを表示させます。
Ajaxのローディング中にくるくる（スピナー）を表示する例
以下がjQueryを利用したソースコードの例となります。
例では、「Click 」ボタンを押すと、Ajax通信を行います。そして、ローディング中には、スピナーがある全画面を覆うオーバーレイを表示し、Ajax通信が終了するとオーバーレイを非表示にします。
See the Pen jQuery Ajax Loading Spinner by yic666kr (@yic666kr) on CodePen.
jQueryのソースコードの説明
以下は、例のソースコードのポイントとなる箇所となります。
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の箇所については、以下のリンク先を参考にしてみてください。
