Ajaxで通信中にローディング画像を表示する方法

Ajaxで非同期通信中に、クルクル回る画像が表示されているのを見かけたことのある人も多いのではないでしょうか。
あのクルクル回る画像はローディング画像ともいいます。今回は、ローディング画像の表示方法を解説します。
もちろんAjax通信中だけローディング画像を表示させておいて、Ajax通信終了時には消すような実装とします。

Ajaxで通信中にローディング画像を表示するコード

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>AjaxでHTTP通信中にローディング画像を表示する</title>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>

<!-- スクリプト部分 -->
<script type="text/javascript">
    $( function() {
        $( '#ajax-button' ) .click(
        function() {
            $("#loading").html("<img src='./gif-load.gif'/>");
            $.ajax({
              url: 'http://localhost:8080/AplExample/family',
              type:'GET',
              dataType: 'jsonp',
              timeout:10000,
              success: function(data) {
                           alert("ok");
                       },
              error: function(data) {
                           alert("ng");
                     },
              complete : function(data) {
                          $("#loading").empty();
                          $("#loading").html("<p>通信終了</p>");
                     }
            });
        });
    } );
</script>

</head>

<!-- HTML部分 -->
<body>

<h1>AjaxでHTTP通信中にローディング画像を表示する</h1>
<p><input type="button" id="ajax-button" value="click" /> <br />
<div id="loading" />

</body>
</html>

ダウンロード

GitHubでサンプルソースとローディング画像を公開しています。こちらからご自由にダウンロードして下さい。

解説その１

ボタンをクリックして、Ajax通信が開始される直前で、ローディング画像を表示しています。ソースは１５行目です。
Ajax通信が終了した後に、ローディング画像を「empty」で消したあと、「通信終了」を表示しています。ソースは２８行目です。

Ajax中のcompleteは、通信が成功しても失敗しても必ず処理される部分です。

実行結果

「clickボタン」をクリックすると、、、

ローディング画像が表示されます！

Ajax通信後、結果(アラート画面)が表示されます。

アラート画面の「OK」をクリックすると、ローディング画像が非表示となります。

ローディング画像の作成

ローディング画像の作成は、ローディングGIF画像の作成ツールで作っています。
今回は「Loader Generator」というWebブラウザから作成出来るツールを使って作成しました。

さいごに

よくみかけるクルクル画像は、Ajax通信を行ううえで必ずあったほうがよいです。
ローディング画像の表示方法も難しくはないと思うので、必ず実装するようにしましょう！
ローディング画像の作成ツールも色々種類があるので作っていて楽しくなります。クルクル回るだけではなく、色々なバリエーションがあるのでお気に入りをみつけて下さい。