Loading animation doesn't show up until after ajax call completes in Safari/Chrome

Question

I\'ve run into a problem that I haven\'t been able to find a solution to yet.

I\'m creating a resource booking application which uses AJAX to process information given b

Answer 1

You could set a callback for the image load event and then only execute the ajax POST when it has loaded. Like so...

function processBooking(selection, responseID, formElement, removing, fromManager, resourceType) {
    //...some stuff
    startLoading(function(){
        sendAsyncRequest(url,postData,callback,false);
    });
    //...some more stuff
}

function startLoading(callback) {
    document.getElementById("container").style.opacity = "0.2";
    document.getElementById("cover").style.display = "block";
    var img = new Image();
    img.onload=callback;
    img.src="/intranet/images/ajax-loader.gif";
    var newDiv = document.createElement("div");

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

    newDiv.innerHTML = "

Processing database...
     
";
    document.body.appendChild(newDiv);

    ignoreClicks = true;
 }