Bootstrap Modal не загружается сразу по нажатию кнопки из-за вызова jQuery ajax

Question

Я использую модал начальной загрузки, чтобы показать сообщение о загрузке, когда я выполняю ajax-вызов для проверки URL-адреса на основе значения, возвращаемого statuscode. Как только пользователь нажимает кнопку, должно появиться сообщение загрузчика и в последующем сделан jjuery-вызов ajax.

Отображается модальный Bootstrap, но с небольшой задержкой, вместо этого я хочу немедленно показать сообщение загрузчика модального Bootstrap.

Использую Bootstrap, Магистраль, JQuery. Это в основном гибридное мобильное приложение, разработанное с использованием веб-технологий.

Вот что я делаю,

Модальный код BootStrap, в основном его скрытый (я открываю модальный через javascript)

<div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1" aria-hidden="true" data-backdrop="static" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog modal-lg vertical-align-center">
            <div class="modal-content">
                <div class="modal-body">
                    <div id="gifLoad"><img id="loading-image" src="img/ajax-loader.gif" alt="Loading..." /> </div><div id="dataLoad"><p>Please wait..!!!</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

Событие нажатия кнопки запускается через магистраль

   openPage: function () {  
        $('.modal').modal('show');         // Opening the bootstrap model on button click    
        var networkState = navigator.connection.type;
        if (networkState === Connection.NONE) {
            // Check the phone has internet connection or not to proceed further.
            var loaderView = SafetyLoaderView();
            loaderView.render();
            loaderView.appendMessage('Internet Connection seems to be offline');
            loaderView.show();
        }
        else {  
            var textValue = $('#inputValue').val();             // Get the entered value of the input box

            if (textValue === null || textValue === "") {
                $('.modal').modal('hide');
                // If the input box is empty then change the color of the border of thr input box.
                this.$el.find('#inputText').addClass('has-error');
            }
            else {

                var serverUrl = "https://www."+ value1 + value2  + "google.com";              // Forming the URL based on the values entered by the user.
                var status = this.validateURL(serverUrl);           // Calling the validateURL method to validate the URL.

                if (status === 200) {
                    $('.modal').modal('hide');
                    // If status code is equal to 200 opening the next screen of the application
                    var url = "page2.html";

                    window.location = url;
                }
                else if (status === -1) {
                    $('.modal').modal('hide');
                    var loaderView = new SafetyLoaderView();         // Handling the status code other than 200,400,404 and 500.
                    loaderView.render();                             // Displaying standard message to the remaining status code.
                    loaderView.appendMessage('The Request could not be completed');
                    loaderView.show();
                }
            }
        }
    },

Проверка метода URL, который также является частью основного представления:

validateURL: function (url) {
        var stat = -1;         // Validating the URL. Based on the status code returned, appropriate error message is displayed.
        // New status code can be added to handle the message.

 //------------------------------------------------------------------------

        // ----------- I feel due to ajax call done here its giving me a delay to load modal
        // Instead I want instanly, if I use alert box that is displayed immediately  

//------------------------------------------------------------------


        $.ajax(url, {
            async: false,
            statusCode: {
                200: function (response) {
                    stat = 200;
                },
                400: function (response) {
                    $('.modal').modal('hide');     // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('The Request could not be understood');
                    loaderView.show();
                    stat = 400;
                },
                404: function (response) {
                    $('.modal').modal('hide');         // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('Requested URL not found');
                    loaderView.show();
                    stat = 404;
                },
                500: function (response) {
                    $('.modal').modal('hide');        // Hiding the modal
                    var loaderView = new SafetyLoaderView();
                    loaderView.render();
                    loaderView.appendMessage('Internal server error');
                    loaderView.show();
                    stat = 201;
                },
            },
        });
        return stat;
    },

Если я не буду вызывать метод validateURL, то модальный Bootstrap загружается мгновенно.

Мой вопрос, как показать этот модальный загрузчик во время вызова AJAX.?