[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();
}
ローディングにずっとなってる
終わらせるためには
ローディングで固まっている
removeLoading関数にある$(“#loading”).remove();をCallすればローディングオブジェクトが消えます