現在は下記のような実装になっており、処理中画像は処理終了と同時に一瞬出現し、消えるという状態です。
これを、処理開始~処理終了まで表示したいのですが、方法が分かる方がいましたらご教授をお願いします。
参考にしたサイト

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();
}