Question

When a form is submitted I show a loading animation and disable the button. Unfortunately, when I click the back button, Firefox still shows the loading image and the button is still disabled. This does not happen in Chrome. Any ideas?

$(document).ready(function() {
    $('#go').removeAttr('disabled');
    $('#loading').replaceWith('<img id="loading" src="/static/images/loading.gif" style="display:none; vertical-align:middle" />');

    $('#go').click(function(e) {
        e.preventDefault();
        $('#go').attr('disabled', 'disabled');
        $('#loading').show();
        $('#go_form').submit();
    });
});

Answer 1

Firefox uses in-memory caching for entire web pages, including their JavaScript state, within a browser session. Going backwards and forwards between visited pages requires no page loading. This feature makes page navigation very fast.

In order to detect this, use the pageshow event. The event will have a property called persisted which will be true if you are navigating through the cache. If you see this state, you can reset the state of your page.