15

I have a page loading spinner .gif animation 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.

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.

Is there any way to hide the loading .gif when the browser back button is clicked?

Here's 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 have tried this as a solution, but it doesn't work:

jQuery(function ($) {
    $("#loading-image").hide(); // Hide animation on page load.
});
MeSo2
  • 450
  • 1
  • 7
  • 18
Daniel Congrove
  • 3,519
  • 2
  • 35
  • 59
  • _"it doesn't fully reload the page"_. What do you mean by that? If you're replacing only part of the document make sure your transitions are clean; any shared elements should be returned to their initial state. – Halcyon Sep 14 '15 at 13:11
  • 1
    Like, in a browser (firefox is what I'm using), when you click on the back button to go back a page, it doesn't fully reload the page from the website. It seems to just redisplay it from the browser's memory cache. – Daniel Congrove Sep 14 '15 at 13:14

5 Answers5

21

I found this to work, without having to disable the cache. Turns out there is a pageshow event that lets you perform actions even when the page is loaded from cache.

Here's my solution code:

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

Source: https://stackoverflow.com/a/12648745/1937348

Community
  • 1
  • 1
Daniel Congrove
  • 3,519
  • 2
  • 35
  • 59
3

It happens because your browser is inserting in cache all elements including your page. When you go back, it loads the last state in cache.

If you want that your navigation loads from server and not from cache you need to declarate a meta-tag or a header within the server to prevent caching your pages.

Here you are 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
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • What you're saying makes sense. But is there anyway to hide the loading animation on a back click, without disabling the cache for the website? – Daniel Congrove Sep 14 '15 at 13:30
  • No in a normal webpage. If you got a SPA (single page application) in this case is possible, but I think that you doesn't got an SPA like backbone or angular, it's true? – Marcos Pérez Gude Sep 14 '15 at 14:00
  • `meta` `Cache-control` will not work in today's browsers. – MeSo2 Jan 30 '23 at 15:51
1

What about this?

$(window).bind("beforeunload",function(event){
    //e.g. 
    removeMyLoadingGifIfPresent();
});
Pierfrancesco
  • 518
  • 6
  • 18
  • 2
    Thanks for sharing. I think that would work for many cases, except this particular one. The gif animation is supposed to show as the page is loading onto the next one. When I tried your code, I don't get to see the loading animation at all, which makes me think the "beforeunload" hides it too quickly. – Daniel Congrove Sep 14 '15 at 14:17
0

Try: 

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

EDIT:Does the image has display:none; as the initial state? Also please attach a fiddle;

WingmanImd
  • 142
  • 6
  • what is the difference? OP is also doing the same. – Jai Sep 14 '15 at 13:15
  • The difference is `$(document).ready()` but there's no guarantee that it works. I don't understand OP's situation. I think OP is misinterpreting what OP is seeing. – Halcyon Sep 14 '15 at 13:18
  • @WingmanImd now this is not an answer. it's a comment you can put it at the question post. You can see that other comments are quite larger than this answer.......;) – Jai Sep 14 '15 at 13:24
  • I did try your $(document).ready(function(){ } to see if it made any difference, but it still didn't work. And yes, it has the .collapse tag, which sets it to display:none; as the initial state. – Daniel Congrove Sep 14 '15 at 13:26
  • Please attach a fiddle or link so we can better see you code. Thank you. – WingmanImd Sep 14 '15 at 13:27
0

Daniel Congrove answered the question; but to be on the safe side, consider avoid jQuery. Some older jQuery versions have reported having problems with older Safari web browsers. Here is an extended version on how to do that:

window.addEventListener("pageshow",function(event) {
    let historyTraversal = event.persisted || 
                        ( typeof window.performance != "undefined" && 
                            window.performance.navigation.type === 2 );
    if (historyTraversal) {
        // Handle page restore or hide image
        document.getElementById("loading-image").style.display = "none";
    }
});
MeSo2
  • 450
  • 1
  • 7
  • 18