【jQuery】ajaxで読み込み中にローディングの実装するにはどうしたらいいのか調べてみた

javascript

以前にxmlのデータをajaxを利用して読みこんで表示する記事を書きましたが、せっかくなのでデータを読みこんでる間にローディングの演出をしたほうがユーザーに取っても分かりやすいと思ったのでその処理の記事を書こうと思います。

処理の内容としては前回同様、jQueryのAjax Eventsを使ってajaxでリクエスト中にローディングの処理をすれば実装できます。

取りあえず、ボタンクリックしたら外部データを読み込む感じでやってみます。

htmlで下準備

取りあえず下記に読む込むためのhtmlを記載する。ローディング画像は最初は非表示にしておく。

//読み込みボタン


//通信中に表示するローディング画像



//読み込んだ内容を表示する

cssは下記のようにした。

div#loader{
	position:absolute;
	display:none;
	}
	
div#res{
	border-top:4px solid #ccc;
	padding-top:20px;
	}

ajax通信でデータを読み込む

jquerのajax通信によるhtmlの読み込みは依然も説明したころあるので割愛。
詳しい情報は「jQuery日本語リファレンス-jQuery.ajax(options)」を見てください。

下記はクリックしたらajax通信でhtmlファイルを読み込む処理をしております。

 $("button").click(function(){
	
	$.ajax({
		type:"GET",
		url:"read.html",
		datatype:"html",
		success: function(data){
			$("#res").append(data);
			},
		error: function(){
			$("#res").html("
読み込めませんでした
");
			}
		});
	});

Ajax Eventsの各種イベントで通信中の処理をする

Ajax Eventsには種類があって今回は「ajaxStart」「ajaxStop」を利用しました。

  • ajaxStart : AJAXリクエストの送信開始時に、既にactiveなリクエストがない場合に実行される関数を指定する。
  • ajaxStop : AJAXリクエストの送信終了時に、実行される関数を指定する。

上記のイベントを利用してajaxによる通信が発生したら最初にcssで非表示にしておいたローディングをshowメソッドで表示します。
正常に読み込まれたらajax通信が修了するのでその時に、hideメソッドでローディング画像を非表示にします。

詳しい情報は「jQuery日本語リファレンス-jQuery.ajax(options)」を見てください。


$("#loader").ajaxStart(function() {
        $(this).show(800);
    }).ajaxStop(function() {
        $(this).hide(800);
    });

といった具合で出来るはずです。サンプルを作ろうと思ったんですが、js do itではajax通信は試せそうにもなく自分のサーバーにアップしたが間違えて消してしまいそうなので辞めましたｗ

参考にしたサイトはAll Aboutの「jQueryのAjax Events 5」の記事に書いてあります。。というかそっちの方が詳しいです。