title: Stop A Web Page From Loading Until A JQuery AJAX Call Completes?
body: <p>I have requirements for a legacy site where I can't redesign the screens, I can't use header no-cache tags and I have to prevent the user from seeing cached screens after they logged out and pressed their back button.</p>
  
  <p>I am almost to a solution ( see the code bit below )</p>
  
  <p>When the page loads, I use a JQuery AJAX function to call the web app and see if the user is still logged in.  If not, the user gets redirected to the login screen</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
   &lt;!-- all the usual header stuff, plus links to the jQuery libaries, first script tag on page below --&gt;
  
  &lt;script language = "javascript"&gt;
  
   $.get("/acme/confirm_authentication",function(data){
              if( data != "confirmed"){
                  location.href = "logout";
              }
    }); 
  
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  blah blah blah
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The big thing I don't like about this workaround is that for a split second I can the content before the JQuery function completes.</p>
  
  <p>Is there a way I can keep the page from loading/rendering until the JQuery AJAX function comes to a stop?</p>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>Update: Answer:</p>
  
  <hr>
  
  <p>I modified the accepted answer below to include a "cache: false" option.  In Firefox and Chrome, cached copies of the page that were reached via the back button would run the .ajax(), but would use a cached copy of the variable "data", which would give me an out of date answer.</p>
  
  <pre><code>$.ajax({
   url: "/acme/confirm_authentication",
   async:false,
   cache: false,
   success: function(data) {
       if( data != "confirmed"){
           location.href = "logout";
       }
   }         
  </code></pre>
  
  <p>});</p>