ajax処理中に画像を表示させたい
現在は下記のような実装になっており、処理中画像は処理終了と同時に一瞬出現し、消えるという状態です。
これを、処理開始~処理終了まで表示したいのですが、方法が分かる方がいましたらご教授をお願いします。
参考にしたサイト
function upload(form) {
//処理中画像表示
dispLoading();
~処理~
$.ajax(
{
url: url,
type: 'POST',
processData: false,
contentType: false,
data: fd,
async: false,
~処理~
})
//処理中画像削除
removeLoading();
}
// Loadingイメージ表示関数
function dispLoading(msg) {
// 画面表示メッセージ
var dispMsg = "";
// 引数が空の場合は画像のみ
if (msg != "") {
dispMsg = "<div class='loadingMsg'>" + msg + "</div>";
}
// ローディング画像が表示されていない場合のみ表示
if ($("#loading").size() == 0) {
$("body").append("<div id='loading'>" + dispMsg + "</div>");
}
}
// Loadingイメージ削除関数
function removeLoading() {
// Loadingイメージを消す
$("#loading").remove();
}