当浏览器返回按钮被点击时，如何隐藏加载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.
});

- Daniel Congrove

---

“它并没有完全重新加载页面”是什么意思？如果您只替换文档的一部分，请确保过渡干净；任何共享元素都应返回到其初始状态。 - Halcyon

就像在浏览器中（我使用的是Firefox），当您单击后退按钮返回上一页时，它不会从网站完全重新加载页面。它似乎只是从浏览器的内存缓存中重新显示它。 - Daniel Congrove

Answer 1

我发现这个方法可行，而无需禁用缓存。原来有一个pageshow事件，可以使您即使在页面从缓存加载时也能执行操作。

以下是我的解决方案代码：

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

Source: https://dev59.com/xGkw5IYBdhLWcg3wJXIh#12648745

- Daniel Congrove

---

注意：如果表单触发文件下载（例如），则此事件不会在文件下载后发生。 - Jerome Jaglale

Answer 2

这是因为您的浏览器将页面中的所有元素包括在缓存中。当您返回时，它会加载缓存中的最后一个状态。

如果您希望导航从服务器而不是缓存中加载，您需要在服务器内声明一个meta标签或标题以防止缓存您的页面。

以下是示例：

HTML（meta标签）

 <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

- Marcos Pérez Gude

---

你说的有道理。但是有没有办法在返回点击时隐藏加载动画，而不禁用网站的缓存？ - Daniel Congrove

不在普通网页中。如果您有一个单页应用程序（SPA），在这种情况下是可能的，但我认为您没有像backbone或angular那样的SPA，这是真的吗？ - Marcos Pérez Gude

meta Cache-control 在今天的浏览器中不起作用。 - MeSo2

Answer 3

这个是什么意思？

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

- Pierfrancesco

---

谢谢分享。我认为这对许多情况都适用，但不适用于这种特殊情况。gif动画应该在页面加载到下一页时显示出来。当我尝试您的代码时，我根本看不到加载动画，这让我觉得"beforeunload"隐藏得太快了。 - Daniel Congrove

Answer 4

Daniel Congrove回答了这个问题；但为了安全起见，考虑避免使用jQuery。一些旧版本的jQuery与旧版Safari浏览器报告存在问题。以下是如何实现的扩展版本：

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

- MeSo2

Answer 5

尝试：

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

编辑：图片的初始状态是否为display:none;？ 另外请附上一个fiddle；

- WingmanImd

---

有什么区别？OP也在做同样的事情。 - Jai

区别在于 $(document).ready()，但并不能保证它能正常工作。我不理解 OP 的情况。我认为 OP 对自己所看到的内容有误解。 - Halcyon

@WingmanImd，这不是一个答案，而是一个评论，你可以将其放在问题帖子中。你可以看到其他评论比这个答案要长得多......;) - Jai

我确实尝试了你的$(document).ready(function(){ })，看看它是否有任何不同，但它仍然没有起作用。是的，它具有.collapse标记，将其设置为display:none;作为初始状态。 - Daniel Congrove

请附上一个 JSFiddle 或链接，以便我们更好地查看您的代码。谢谢。 - WingmanImd