How to hold page render until an AJAX call completes?

Question

I know that the huge advantage of doing AJAX calls is that the rest of the page can load and be ready for the user before a certain element is quite ready yet. But I have a

Answer 1

Update 03/2015: I would strongly advise against using this method, since synchronous XMLHttpRequests on the main thread are now deprecated; see http://xhr.spec.whatwg.org/

Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user's experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when the JavaScript global environment is a document environment. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an InvalidAccessError exception when it occurs.

---

jQuery.ajax() sports an async parameter. When set to false, your AJAX request becomes synchronous / blocking.

As for the page load: Do not hook into any "ready" event. Just call directly after loading the jQuery library:

$('body').css('display', 'none');

Then run your (now synchronous) AJAX request.

On AJAX completion/success, Do

$('body').css('display', 'block');

Cheers.

Answer 2

You can set the display of your wrapper element to none and then change it to block after the ajax request returns.

Answer 3

try using async:false in your ajax call.