title: When loading html with ajax in jQuery, how can I make sure my loading gif remains visible the entire time until the html has been added?
body: <p>I have an ajax call which loads some HTML into the DOM. If the call was successful I show a spinning loading gif and when the call is complete I hide it. The code:</p>
  
  <pre><code>$.ajax({
      url: someUrl,
      type: 'POST',
      dataType: 'json',
      data: someData,
      success: function(response){
          $(myLoadingGif).show(); // Show the loading gif
          $(myContainer).html(response);
      },
      complete: function(){
          $(myLoadingGif).hide(); // Hide the loading gif. Note: HTML has not been added yet
      }
  });
  </code></pre>
  
  <p>The problem is: The loading gif becomes hidden a couple of seconds BEFORE the HTML is added, even though I declared it in the complete section of the ajax call. I want it to remain visible the entire time. And I don't want to do an ugly setTimeout() of 1000ms just to delay it. I might add that the chunk of HTML loaded is fairly big. It's a table with 20-40 rows.</p>
  
  <p>Any ideas on how to make sure the gif remains visible until the HTML has actually been added?</p>