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

Its an old thread, but just today i had similar problem. Maybe it will help someone :).

I've had a similar problem in IE - i have my omy own loading type div which i show before ajax request and hide it after the data is loaded. My div was shown only for a little while (it just flickered) after the data was already loaded.

Something like this:

document.getElementById('pnLoaderPanel').style.display = 'block';
Task.Refresh(); //method that calls ajax
document.getElementById('pnLoaderPanel').style.display = 'none';

So I've noticed that if I put alert right after showing the div, my div is visible. I guess IE somehow did not refresh correctly so what i did was this and now its working perfectly:

document.getElementById('pnLoaderPanel').style.display = 'block';
setTimeout(Task.Refresh(), 1); //method that calls ajax
document.getElementById('pnLoaderPanel').style.display = 'none';

Answer 2

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 = "<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;
 }