在整个 html 网页过渡过程中等待光标



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

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

  1. 旧页面在浏览器中保留 1-2 秒
  2. 整个 浏览器变白 1-2 秒。
  3. 浏览器花费 X 秒 以加载新页面。

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

1:当用户导航(例如按下链接或按钮(时,可以像 CSS 一样设置 CSS

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

这有点帮助,因为等待光标大约通过阶段 (1( 显示。

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

理想的情况是,也许/可能(至少在概念上(在阶段(1(开始时在浏览器应用程序本身上设置一个等待光标,然后在阶段(3(结束时将浏览器光标恢复为默认值(例如,在Document Ready事件中(。

请提供意见! :-) 在我之前成千上万的人一定遇到过这个(!?

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

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

所以这样的事情最适合我。

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

最新更新