[javascript] 処理中にローディングの画面を表示して、処理が終了したら消す方法

javascriptで、アップロードなど何か処理中にローディングの画面を表示して、処理が終了したら消す方法は以下のコードを実装する

CSS

<style>
 #loading {
 display: table;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background-color: #fff;
 opacity: 0.8;
}
 
#loading .loadingMsg {
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 padding-top: 140px;
 background: url("/image/gif-load.gif") center center no-repeat;
}

/image/gif-load.gifには、ぐるぐる回るアイコンなどをアップロードしておく

Javascript

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
/* ------------------------------
 Loading イメージ表示関数
 ------------------------------ */
function dispLoading(msg){
 // 引数なし（メッセージなし）を許容
 if( msg == undefined ){
 msg = "";
 }
 // 画面表示メッセージ
 var dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
 // ローディング画像が表示されていない場合のみ出力
 if($("#loading").length == 0){
 $("body").append("<div id='loading'>" + dispMsg + "</div>");
 }
}
 
/* ------------------------------
 Loading イメージ削除関数
 ------------------------------ */
function removeLoading(){
 $("#loading").remove();
}
</script>

使い方

function upload() {
 dispLoading("処理中");
 //...upload処理

 //...uploadが完了したら
 removeLoading();
}