Animation loading does not appear until ajax call completes in Safari / Chrome

I had a problem with which I could not yet find a solution.

I am creating a resource reservation application that uses AJAX to process the information provided by a user into a base database. Whenever the user wants to create an order, they fill out the form using relevant information that is sent via AJAX to the servlet that processes the information and updates the database. Since we have included the option of re-booking, sometimes the database may take some time to update. Thus, we have completed the "processing ..." schedule, which will be displayed while the servlet is doing this.

The way we implemented the processing graphics and the ajax calls worked fine in firefox, opera and, i.e. problem with safari and chrome ... so probably something is related to WebKit.

In Safari / Chrome, the graphic processing is not displayed on the page until the database is completed and the ajax call returns ... it defeats the whole purpose of the "processing ..." graph.

Does anyone know why a graphical object (which is inserted before calling the AJAX request calls) does not appear until the ajax call returns?

This is how we implemented graphical and ajax calls. This is a function that calls both a function to create a chart and to send an ajax request:

/**
 * Implements AJAX calls to add/remove bookings from the database
 */
function processBooking(selection, responseID, formElement, removing, fromManager, resourceType) {

 if (!removing) {
 purpose = formElement.purpose.value;
 email = formElement.email.value;

            /* These values should only be set if the user is an admin otherwise they do not exist so send in the default empty
             * values to the processing servlet
             */
            if (formElement.repeatEveryUnits != undefined && formElement.repeatFor != undefined && formElement.repeatForUnits != undefined)
            {
                repeatEvery = formElement.repeatEveryUnits.value;
                repeatForAmount = formElement.repeatFor.value;
                if (repeatForAmount == '') {
                        repeatForAmount = '0';
                }
                repeatForUnit = formElement.repeatForUnits.value;
            }
            else
            {
                repeatEvery = '0';
                repeatForAmount = '0';
                repeatForUnit = '0';
            }

 }

    /* Function to be passed in as the callback to our asynchronous request */
    callback = function() {
        document.getElementById(responseID).innerHTML += '<p class="button-small" onclick="removeDiv(\'' + responseID + '\')>Clear</p>';
        document.getElementById(responseID).style.padding = '0 0 5px 0';
    }

    /* Parameters that are to be used in our asynchronous request */
    postData += parseArray(selection);
    postData += '&removing=' + removing;
    postData += '&availability=false';
    postData += '&type=' + resourceType;

    /* Play the loading graphic */
    startLoading();

    /* Make the call to the servlet */
    response = sendAsyncRequest(url,postData,callback,false);

    /* reset global variables used */
    reset();

    if ((!removing) || (!fromManager))
    {
        week = document.getElementById("selectedWeek").value;

        window.location = "../../servlet/ResourceBooking?action=schedule&type=" + resourceType + "&week=" + week;
    }

    return response;
 }

This is the code that inserts the graphics:

/**
 *      Begins a loading animation that is to be played while the database does its work 
 */
function startLoading() {

    document.getElementById("container").style.opacity = "0.2";
    document.getElementById("cover").style.display = "block";
    var newDiv = document.createElement("div");

    newDiv.setAttribute("id", "loading");
    newDiv.style.height = 120 + "px";
    newDiv.style.width = 350 + "px";

    newDiv.innerHTML = "<div id='progress'><p id='progress'><img id='progress_image' src='/intranet/images/ajax-loader.gif' alt=''><br/><h3>Processing database...</h3></p></div>";
    document.body.appendChild(newDiv);

    ignoreClicks = true;
 }

And this is the code that XMLHttpRequest does to call AJAX:

function sendAsyncRequest(servletUrl, postData, callback, async) {

try {
      asyncRequest = new XMLHttpRequest();
}
catch (e) {
        // Internet Explorer Browsers
        try {
                asyncRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
                try {
                asyncRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch(e){
                        // Something went wrong
                        alert('Request Failed');
                        return false;
                }
        }
}

asyncRequest.onreadystatechange = function() {
    if (asyncRequest.readyState == 4 && asyncRequest.status == 200) {
                try {
                                callback();
                }
                catch (e) {
                         // IE fails unless we wrap the string in another element.
                        var childDiv = current_element.getElementsByTagName("div");
                        if (childDiv.length == 0) {
                                var wrappingDiv = document.createElement('div');
                                //wrappingDiv.setAttribute("id", current_element.id+"Div");
                                wrappingDiv.innerHTML = asyncRequest.responseText;
                                current_element.appendChild(wrappingDiv);
                        }
                        else {
                                var wrappingDiv = document.createElement('div');
                                //wrappingDiv.setAttribute("id", current_element.id+"Div");
                                wrappingDiv.innerHTML = asyncRequest.responseText;
                                current_element.replaceChild(childDiv[0], wrappingDiv);
                                //childDiv[0].innerHTML = asyncRequest.responseText;
                        }
                }
        }
};

asyncRequest.open('POST', servletUrl, async);

if (postData == null)
{
    asyncRequest.send(null);
}
else
{
    asyncRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    asyncRequest.setRequestHeader("Content-length", postData.length);
    asyncRequest.setRequestHeader("Connection", "close");
    asyncRequest.send(postData);
}

return response;
}

- WebKit, div startLoading , ?

(sendAsyncRequest (...)) , , , , - , .

, ...