等待整个html页面上的光标

是否可以以简单的方式将光标设置为整个html页面上的"等待"？想法是在完成ajax调用时向用户显示正在进行的操作.下面的代码显示了我尝试过的简化版本,并演示了我遇到的问题:

如果一个元素(#id1)有一个光标样式集,它将忽略在body上设置的那个(显然)

某些元素具有默认光标样式(a),并且不会在悬停时显示等待光标

body元素具有一定的高度,具体取决于内容,如果页面很短,则光标不会显示在页脚下方

考试:

    
        
    
    
        
cursor: pointer
        
no cursor
        Do something
    

稍后编辑...
它在firefox和IE中工作:

div#mask { display: none; cursor: wait; z-index: 9999; 
position: absolute; top: 0; left: 0; height: 100%; 
width: 100%; background-color: #fff; opacity: 0; filter: alpha(opacity = 0);}


Do something

这个解决方案的问题(或特征)是因为重叠的div会阻止点击(感谢Kibbee)

稍后编辑......
Dorward的一个更简单的解决方案:

.wait, .wait * { cursor: wait !important; }

然后

Do something

此解决方案仅显示等待光标但允许单击.

1> Dani..：

---

如果您使用从Dorward发布的这个稍微修改过的CSS版本,

html.wait, html.wait * { cursor: wait !important; }

然后你可以添加一些非常简单的jQuery来适用于所有ajax调用:

$(document).ready(function () {
    $(document).ajaxStart(function () { $("html").addClass("wait"); });
    $(document).ajaxStop(function () { $("html").removeClass("wait"); });
});

或者,对于较旧的jQuery版本(1.9之前):

$(document).ready(function () {
    $("html").ajaxStart(function () { $(this).addClass("wait"); });
    $("html").ajaxStop(function () { $(this).removeClass("wait"); });
});

---

我真的想用这个答案......为什么它不是被接受的？

---

这应该是公认的答案,就像魅力一样.

2> Eric Wendeli..：

---

我知道你可能无法控制这个,但你可能会选择一个覆盖整个身体的"掩蔽"div,其z-index大于1.如果你愿意,div的中心部分可以包含一个加载消息.

然后,您可以将光标设置为等待div,而不必担心链接,因为它们位于您的屏蔽div"下方".这是"masking div"的一些示例CSS:

body { height: 100%; }
div#mask { cursor: wait; z-index: 999; height: 100%; width: 100%; }

---

这通常会导致问题.在Firefox中,在整个页面上放置一个固定的div会导致整个页面变得无法点击.即,您无法单击链接,因为您没有单击链接前面的div所单击的链接.

---

我使用position:fixed所以它总是在屏幕上,位置:绝对当我在页面底部时它不会显示.

---

好好玩了一会儿后再玩了:div#mask {display:none; 游标:等待; z-index:9999; 位置:绝对; 顶部:0; 左:0; 身高:100%; 宽度:100%; background-color:#fff; 不透明度:0; filter:alpha(opacity = 0);}

3> Kibbee..：

---

这似乎适用于Firefox

*部分确保将鼠标悬停在链接上时光标不会改变.虽然链接仍然可以点击.

---

.wait,.wait*{cusor:wait!important; 然后设置document.body.className ='wait'; 用JavaScript

4> pasx..：

---

我今天几个小时一直在努力解决这个问题.基本上一切都在FireFox中正常工作,但(当然)不在IE中.在IE中,等待光标显示在执行耗时功能之后.

我终于在这个网站上找到了诀窍:http: //www.codingforums.com/archive/index.php/t-37185.html

码:

//...
document.body.style.cursor = 'wait';
setTimeout(this.SomeLongFunction, 1);

//setTimeout syntax when calling a function with parameters
//setTimeout(function() {MyClass.SomeLongFunction(someParam);}, 1);

//no () after function name this is a function ref not a function call
setTimeout(this.SetDefaultCursor, 1);
...

function SetDefaultCursor() {document.body.style.cursor = 'default';}

function SomeLongFunction(someParam) {...}

我的代码在JavaScript类中运行,因此this和MyClass(MyClass是一个单例).

在尝试显示本页所述的div时遇到了同样的问题.在IE中,它在函数执行后显示.所以我想这个技巧也可以解决这个问题.

非常感谢glenngv这篇文章的作者.你真的让我的一天!