Question

在对我的各种网站进行UX测试时，我经常注意到人们很难确定他们的“点击”实际上是否在做任何事情。

有多种UI处理方式，例如动画按钮显示它们已被按下，但我想探索一个替代选项。

当浏览器开始加载新页面时，我想用加载器为页面制作动画。

JS中的“正在加载新页面”状态是否可用？我们可以将其用于这种情况吗？是否为此建立了任何库？

编辑：许多人似乎混淆了我的问题，这是可以理解的。因此，这是尝试清除问题的方法。

在页面A上，我想检测到用户已请求页面B并在等待服务器响应。我想在等待服务器响应和页面B的第一次绘制时为页面A设置动画。

Answer 1

您可以使用jquery。 https://learn.jquery.com/using-jquery-core/document-ready/

您可以在加载某些内容之前显示一些图像，并在加载文档之后将其隐藏。

Answer 2

根据您的实现语言可以使用许多库。

有关基本示例，请选中W3schools

Answer 3

我假设只有<a>标签重定向到页面B，所以您可以将所有显示动画的<a>标签放置为侦听器，并隐藏页面的其余部分以更改“可见性”的状态样式”与object.style.visibility = "visible|hidden|collapse|initial|inherit"重定向到B。

例如：

var linkList = document.getElementsByTagName("a"); // don't use it for all <a> tags. 
                                                   // Only for those that redirects to B

for(let i=0; i<linkList.length; i++){
    linkList[i].addEventListener("click", function(e){ 
        e.preventDefault();
        var href = this.getAttribute('href');
        var target = this.getAttribute('target') || "_self";
        // show loading animation in here
        window.open(href,target);
    },false);
}

检测浏览器正在加载新页面以强调正在发生的事情

3 个答案: