【Javascript】非同期処理の待ち時間にアニメーションを表示する

概要

Webやスマホアプリで、何か非同期処理を行っている際に画面に表示される、くるくる回ったりするアニメーション(正式にはなんていうの...Xamarin.Formsの「Activity Indicator」です)を表示する方法です。

作成方法

まず「画像はどうするの」となりますが、これは「Loader Generator」というサイトで、簡単に作成＆ダウンロードできます。
※サイズ・回転速度・色など、いろいろ細かいところまで調整でき、便利です。

実際に表示する方法

これは、実際にサンプルを見た方が早いと思いますので、ソースを。
(ソース自体は、そこまで難しい内容ではないので、説明は省略)

/* ------------------------------
 非同期処理を実行する関数
 ------------------------------ */
function asyncFunc() {  

    // Loading 画像を表示
    dispLoading("処理中...");
   
    // 非同期処理(例)
    $.ajax({
      async : true,
      url : "http://xxx.com/yyy/zzz",
      type:"GET",
      dataType:"json"
    })
    // 通信成功時
    .done(function(data) {
      alert("成功しました");
    })
    // 通信失敗時
    .fail( function(data) {
      alert("失敗しました");
    })
    // 処理終了時
    .always( function(data) {
      // Loading 画像を消す
      removeLoading();
    });  
}  
    
/* ------------------------------
 表示用の関数
 ------------------------------ */
function dispLoading(msg){
  // 引数なしの場合、メッセージは非表示。
  if(msg === undefined ) msg = "";
  
  // 画面表示メッセージを埋め込み
  var innerMsg = "<div id='innerMsg'>" + msg + "</div>";  
  
  // ローディング画像が非表示かどうかチェックし、非表示の場合のみ出力。
  if($("#nowLoading").length == 0){
    $("body").append("<div id='nowLoading'>" + innerMsg + "</div>");
  }
}
 
/* ------------------------------
 表示ストップ用の関数
 ------------------------------ */
function removeLoading(){
  $("#nowLoading").remove();
}  

#nowLoading {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  opacity: 0.8;
}
 
#innerMsg {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding-top: 140px;
  z-index:100;
  background: url("表示するくるくる画像のURL]") center center no-repeat;
}

ポイント

• 非同期処理開始したら「#NowLoading」及び「#innerMsg」のタグを埋め込み、終了したら削除する。
• 「#NowLoading」のタグは、body直下の子要素にする。
• z-indexは、モーダルなどを表示する場合は、大きい値にしておく。
  • モーダルのz-indexとの兼ね合いで非表示になることがある。
• 「#NowLoading」のタグは、もちろんHTMLに記載してもOK。
  • その場合、visibility:visible(hidden)などで制御する。

と、また簡単になりましたが、今回はこの辺で。