Hide loading gif when the browser back button is clicked?

Question

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.
});

Anthea

"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. – Rostellum

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. – Anthea

Answer 1

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://mcmap.net/q/744600/-39-pageshow-39-is-not-received-when-pressing-quot-back-quot-button-on-safari-on-ipad-quot

Anthea

Note: this event does not happen after a file download (if the form triggers a file download, for example). – Sharp

Answer 2

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

Shontashoo

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? – Anthea

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? – Accident

meta Cache-control will not work in today's browsers. – Venerate

Answer 3

What about this?

$(window).bind("beforeunload",function(event){
    //e.g. 
    removeMyLoadingGifIfPresent();
});

Raving

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. – Anthea

Answer 4

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;

Consolation

what is the difference? OP is also doing the same. – Submission

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. – Rostellum

@Consolation 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.......;) – Submission

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. – Anthea

Please attach a fiddle or link so we can better see you code. Thank you. – Consolation

Answer 5

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";
    }
});

Venerate