单击“浏览器后退”按钮时隐藏加载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

我发现这是可行的，而不必禁用缓存。结果发现，即使页面是从缓存加载的，页面显示事件也允许您执行操作。

，这是我的解决方案代码：

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

来源：https://stackoverflow.com/a/12648745/1937348

Answer 2

发生这种情况是因为浏览器正在缓存中插入包括页面在内的所有元素。当您返回时，它将加载缓存中的最后一个状态。

如果希望导航从服务器加载，而不是从缓存加载，则需要声明服务器内的元标记或头，以防止缓存页面。

以下是你的例子：

HTML (元标签)

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

PHP (标头)

 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

Answer 3

那这个呢？

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