title: Wait for AJAX success response before the website finishes on loading
body: <p>I want to keep my website still on loading state while the ajax is still getting the response, and then when the ajax is successful, the website should stop loading.</p>
  <p>'still on loading progress' means your browser's tab progress bar symbol remains visible and spinning, indicating that the website is still loading.</p>
  <p>Please help me out, I'm out of ideas. This is definitely a beginner question with various solutions.</p>
  <p>The HTML file's source code is found below:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;body&gt;
  
  &lt;pre id=&quot;response&quot;&gt;This will be the response...&lt;/pre&gt;
  
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  try {
  $.ajax({
    'url': 'https://example.com',
    'type': 'GET',
    'success': function (data) {
      //I want to only finish loading the page after this is executed
      document.getElementById(&quot;response&quot;).textContent = data;
    } });
  } catch(err) {
    document.getElementById(&quot;response&quot;).textContent = err.message;
  }
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The thing that happens with my current code above is my website finishes on loading already (no visible spinning symbol in the tab already) even if the success function in ajax is still not executed or in other words, still awaiting response from ajax.</p>
  <p>Thank you in advance for answering my question : )</p>