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

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

Answer 4

尝试：

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

编辑：图片是否有display:none;作为初始状态？还请附上小提琴;

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

4 个答案:

HTML（元标记）

PHP（标题）