Geek Answers Handbook

Hide loading gifs when a browser button is clicked?

I have an animation with loading animations displayed during page loading after the form is submitted, and everything works fine. However, if you submit the form, and then click on the back arrow in the browser, it will display the previous page, and the .gif download is still visible.

I set it so that the gif loading is hidden when the page loads. But if you just click the back button in a browser (like firefox), it won’t completely reload the page and the gif animation will still be visible.

Is there a way to hide the .gif download when I click the browser back button?

Here is my jquery code:

<!-- inline scripts related to this page --> <script type="text/javascript"> // 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 > 1) { $("#loading-image").hide(); } else { $("#loading-image").show(0); // show animation } return true; // allow regular form submission }); </script>

Here is my relevant html:

 <div> <button type="submit"><i class="fa fa-search"></i> Search</button> <span class="loading collapse" id="loading-image"><img src="@Url.Content("~/content/img/layout/ajax-loader.gif")"></span> </div>

And I tried this as a solution, but it does not work:

 jQuery(function ($) { $("#loading-image").hide(); // Hide animation on page load. });
+6
source share
4 answers

I found this to work without having to disable the cache. It turns out that there is an event that allows you to perform actions even when the page is loaded from the cache.

Here is my solution code:

 $(window).bind("pageshow", function(event) { $("#loading-image").hide(); });

Source: fooobar.com/questions/437433 / ...

+10
source

This is because your browser inserts into the cache all the elements, including your page. When you return, it loads the last state into the cache.

If you want your navigation to load from the server, and not from the cache, you need to declare a meta tag or header on the server to prevent your pages from caching.

Here are some examples:

HTML (meta tags)

  <meta http-equiv="Cache-control" content="no-cache">

PHP (header)

  header("Cache-Control: no-cache, must-revalidate"); //HTTP 1.1 header("Pragma: no-cache"); //HTTP 1.0 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
+3
source

How about this?

 $(window).bind("beforeunload",function(event){ //eg removeMyLoadingGifIfPresent(); });
+1
source

Try:

 $(document).ready(function(){ $("#loading-image").hide(); // Hide animation on page load. });

EDIT: Does the image have display:none; the initial state? Also attach a violin;

0
source

More articles:


All Articles