title: Hide loading gif when the browser back button is clicked?
body: <p>I have a loading spinning animated .gif that appears while the page is loading after a form has been submitted, and everything works fine. However, if you submit the form, and then click on the back arrow on the browser, it shows the previous page, with the loading .gif still visible.</p>
  
  <p>I have it set so that the loading gif is hidden when the page loads. But if you simply click the back button in a browser (like firefox), it doesn't fully reload the page and the animation gif is still visible.</p>
  
  <p>Is there any way to hide the loading .gif when the browser back button is clicked?</p>
  
  <p><strong>Here's my jquery code:</strong></p>
  
  <pre><code>&lt;!-- inline scripts related to this page --&gt;
  &lt;script type="text/javascript"&gt;
      // Show spinning animation on form submit.
      $("#filter-results-form").submit(function (e) {
          // Check for form errors before displaying loading gif.
          if ($('.field-validation-error').length &gt; 1) {
              $("#loading-image").hide();
          } else {
              $("#loading-image").show(0); // show animation
          }
          return true; // allow regular form submission
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Here is my relevant html:</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;button type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt; Search&lt;/button&gt;
      &lt;span class="loading collapse" id="loading-image"&gt;&lt;img src="@Url.Content("~/content/img/layout/ajax-loader.gif")"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>And I have tried this as a solution, but it doesn't work:</p>
  
  <pre><code>jQuery(function ($) {
      $("#loading-image").hide(); // Hide animation on page load.
  });
  </code></pre>