单击浏览器后退按钮时隐藏加载gif？

Question

我有一个加载旋转动画.gif,在页面提交后显示,并且一切正常.但是,如果您提交表单,然后单击浏览器上的后退箭头,它将显示上一页,加载.gif仍然可见.

我设置它,以便在页面加载时隐藏加载gif.但是,如果您只是单击浏览器中的后退按钮(如firefox),它就不会完全重新加载页面,动画gif仍然可见.

有没有办法在点击浏览器后退按钮时隐藏加载.gif文件？

这是我的jquery代码:

<!-- 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>

这是我的相关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>

---

我已经尝试过这个解决方案,但它不起作用:

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

Answer 1

我发现这个工作,而不必禁用缓存.事实证明,有一个pageshow事件,即使从缓存加载页面,您也可以执行操作.

这是我的解决方案代码:

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

资料来源:https: //stackoverflow.com/a/12648745/1937348