在整个 html 网页转换中等待光标答案

【问题标题】：Wait cursor throughout html web page transition在整个 html 网页转换中等待光标
【发布时间】：2020-01-08 22:13:46
【问题描述】：

我有一个标准的 ASP.Net/MVC 应用程序，并且有一个我认为非常重要和超级基本（我认为）的问题。一个似乎没有发布答案的问题 (?)

超常见场景：
在 HTML 页面中，用户按下某种页面导航按钮。现在通常发生的情况如下：

现在，我认为一个超级基本要求是，用户在所有步骤 1、2 和 3 中都获得等待或进度光标。但是，即使在尝试之后，我也无法实现这一点几个小时。

1：当用户导航时（例如按下链接或按钮），可以像设置 CSS

$('*').css('cursor', 'wait !important')

这有点帮助，因为等待光标大约显示在阶段 (1)。

2+3：但是，我在阶段 (2) 和 (3) 中设置等待光标的最佳方法是在新页面的 Document Ready 事件中设置等待光标。但这只会在阶段 (3) 结束时在很短的时间内出现等待光标。这实际上只会导致一些无用的短暂“等待光标闪烁”，这实际上只会给最终用户增加困惑。

理想的情况可能/可能（至少在概念上）在阶段 (1) 开始时在浏览器应用程序本身上设置等待光标，然后在阶段 (3) 结束时将浏览器光标恢复为默认值（例如在文档就绪事件）。

请提供意见！ :-) 在我之前的成千上万的人一定遇到过这种情况（！？）

PS。（是的，我知道浏览器通过页面转换在当前活动的选项卡中给出了一个等待符号，但是这个等待符号太小/偏离了用户的视线。用户需要一个清晰/可见的等待符号在他点击导航按钮的完全相同的位置，即他的眼睛焦点所在的位置。否则，很多用户会认为网页挂了）。

【问题讨论】：

看看这里 -> stackoverflow.com/questions/2821309/… 你试过这些吗？您基本上想在单击时更改光标，然后在页面加载完成后将其更改回来。这个虽然已关闭，但可能对您有更好的答案。 stackoverflow.com/questions/9696521/…
另外，如果您尝试了一些代码但无法使其正常工作，那将是您问题的一个很好的补充。我们可以为您提供具体的说明，告诉您接下来要进行哪些更改。您的问题现在太开放了，无法提供与您正在做的事情特别一致的答案。
谢谢，但这些参考资料似乎提到了我已经尝试过的内容。例如。代码 ``` function setHourglass() { document.body.style.cursor = 'wait'; ``` 需要从某个地方调用。而从 Document Ready 调用代码为时已晚。
这就是为什么展示你正在尝试的东西很重要。通常有很多方法可以完成某事。如果您正在尝试某事但它不起作用，那么了解您尝试了什么以及它是如何失败的将有助于我们解决它。看看how to ask a question 我的意思是我可以继续链接不同的解决方案，其中许多您可能已经尝试过，但是您的代码可能已经完成了 90% 的工作，只需要一两次微调。
您确定这样做值得吗？如果它为用户提供了足够的价值，它很可能会直接在流行的浏览器中实现。

【解决方案1】：

我个人喜欢设置等待光标$(window).on('beforeunload', function() {...

所以这样的东西最适合我。

$(window).on('beforeunload', function() {
    $('*').css('cursor', 'wait !important')
});

【讨论】：

谢谢，我已经这样做了。但是该代码只会在阶段 (1) 中显示一个等待光标，即旧页面保留在浏览器中。一旦浏览器变白（或开始加载新页面），等待光标就消失了......
@BjørnSigurdBenestadJohansen 也许您还应该在$(window).on('beforeunload' 和$(document).ready 函数中设置等待光标。这样它就会出现在第 1 阶段和第 3 阶段。
是的，第 1 阶段将使用 $(window).on('beforeunload'.
但是阶段 3 不会被 $(document).ready 函数覆盖，因为这些函数似乎在文档准备好时被调用（如预期的那样），而这为时已晚。此时，不再需要等待光标，因为页面或多或少已完全加载。