gpt4 book ai didi

javascript - 如何在用户通过后退按钮返回页面时隐藏加载叠加层

转载 作者:行者123 更新时间:2023-11-27 23:34:57 24 4
gpt4 key购买 nike

背景

为了简化我的网络应用程序的页面转换,我构建了一个覆盖/加载图标层。它最初是可见的,我在我的 JS 完成加载后隐藏它。然后,我会在单击任何 a 元素时显示它。屏幕截图如下:

enter image description here


代码

HTML

    ...
</head>
<body class="preload">
<loading><div class="pulse-loader visible"></div></loading>

在页面加载时隐藏

setTimeout(function(){
$("body").removeClass("preload");
}, 120);

点击显示

$('body').on('click', 'a', function(event){
$("body").addClass("preload");
});

目标

当用户单击后退按钮时,我希望页面能够意识到这一点并重新隐藏加载叠加层/图标。这可能吗?

最佳答案

回答

答案是 pageshow/pagehide事件。 WebKit 引入这些,部分是为了处理这个确切的问题。有一个加载和卸载事件。我只需要 load 事件用于我的目的,尽管我什至可以使用 unload 来显示我的加载覆盖。

代码

我将它放在我的脚本文件中(在 jQuery document.ready 包装器内部或外部):

if ("onpagehide" in window) {
window.addEventListener("pageshow", function() {
setTimeout(function(){ $('body').removeClass('preload'); }, 120);
}, false);
} else {
window.addEventListener("load", function() {
setTimeout(function(){ $('body').removeClass('preload'); }, 120);
}, false);
}

页面加载时会触发 pageLoaded 函数,即使通过后退按钮到达页面也是如此。

浏览器兼容性:

我已经在 Edge、Firefox、Windows 和 OSX 上的 Safari 中对此进行了测试,它可以正常工作。

编辑:

目前这在 Chrome 中是错误的。有一个 bug ticket ,但最近没有太大的动静。如果您希望看到它得到修复,请投票支持!

关于javascript - 如何在用户通过后退按钮返回页面时隐藏加载叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34270818/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com