将光标等待整个html页面
是否有可能以简单的方式将光标设置为“等待”整个HTML页面？ 这个想法是告诉用户，一个Ajax调用正在完成时发生了什么事情。 下面的代码显示了我尝试的简化版本，并演示了遇到的问题：
- 如果一个元素（＃id1）有一个光标样式设置，它将忽略设置在身上（明显）
- 某些元素具有默认的光标样式（a），不会在hover时显示等待光标
- body元素具有一定的高度取决于内容，如果页面很短，光标不会显示在页脚下面
考试：
<html> <head> <style type="text/css"> #id1 { background-color: #06f; cursor: pointer; } #id2 { background-color: #f60; } </style> </head> <body> <div id="id1">cursor: pointer</div> <div id="id2">no cursor</div> <a href="#" onclick="document.body.style.cursor = 'wait'; return false">Do something</a> </body> </html> 稍后编辑…
它在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);} <a href="#" onclick="document.getElementById('mask').style.display = 'block'; return false"> Do something</a>
此解决scheme的问题（或function）是，它将防止点击重叠的div（谢谢Kibbee）
稍后再编辑…
Dorward的一个更简单的解决scheme：
.wait, .wait * { cursor: wait !important; }
接着
<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>
此解决scheme只显示等待光标，但允许点击。
我知道你可能无法控制这个，但是你可以改为覆盖整个z-index大于1的“masking”div。如果你喜欢，div的中间部分可以包含一个加载消息。
然后，你可以设置光标在div上等待，不必担心链接，因为它们在你的蒙版div下面。 以下是“掩蔽div”的一些示例CSS：
身体{身高：100％; }
div＃mask {cursor：wait; z-index：999; 身高：100％ 宽度：100％; }
如果您使用您从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"); }); });
这似乎在Firefox中工作
<style> *{ cursor: inherit;} body{ cursor: wait;} </style>
*部分确保当您将鼠标hover在链接上时，光标不会更改。 虽然链接仍然是可点击的。
今天我一直在为这个问题苦苦挣扎。 基本上所有的东西都在FireFox中工作得很好，但是（当然）不是在IE中。 在IE中，等待光标在耗时函数执行后显示。
我终于在这个网站上find了诀窍： 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类，因此这个和MyClass（MyClass是一个单身人士）。
当尝试按照本页所述显示div时，我遇到了同样的问题。 在IE中，它显示的function已被执行。 所以我想这个技巧也能解决这个问题。
非常感谢glenngv作者的这篇文章。 你真的让我的一天！
css .waiting * { cursor: 'wait' }
jQuery： $('body').toggleClass('waiting');
你为什么不使用其中一种奇特的加载graphics（例如： http ： //ajaxload.info/ ）？ 等待游标是为浏览器本身 – 所以无论何时出现，它都与浏览器有关，而不是页面。
我知道最简单的方法是使用这样的JQuery：
$('*').css('cursor','wait');
试试css：
html.waiting { cursor: wait; }
看起来，如果属性body被用作html话，它不会在整个页面上显示等待光标。 此外，如果你使用一个CSS类，你可以很容易地控制它实际显示它。
这是一个更复杂的解决scheme，不需要外部CSS：
function changeCursor(elem, cursor, decendents) { if (!elem) elem=$('body'); // remove all classes starting with changeCursor- elem.removeClass (function (index, css) { return (css.match (/(^|\s)changeCursor-\S+/g) || []).join(' '); }); if (!cursor) return; if (typeof decendents==='undefined' || decendents===null) decendents=true; let cname; if (decendents) { cname='changeCursor-Dec-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' , .'+cname+' * { cursor: '+cursor+' !important; }').appendTo('head'); } else { cname='changeCursor-'+cursor; if ($('style:contains("'+cname+'")').length < 1) $('<style>').text('.'+cname+' { cursor: '+cursor+' !important; }').appendTo('head'); } elem.addClass(cname); }
用这个你可以这样做：
changeCursor(, 'wait'); // wait cursor on all decendents of body changeCursor($('#id'), 'wait', false); // wait cursor on elem with id only changeCursor(); // remove changed cursor from body
BlockUI是一切的答案。 试一试。
我使用了Eric Wendelin的解决scheme。 它会在整个身体上显示一个透明的animation覆盖等待格，点击将被等待格阻止，同时可见：
CSS：
div#waitMask { z-index: 999; position: absolute; top: 0; right: 0; height: 100%; width: 100%; cursor: wait; background-color: #000; opacity: 0; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; }
JS：
// to show it $("#waitMask").show(); $("#waitMask").css("opacity"); // must read it first $("#waitMask").css("opacity", "0.8"); ... // to hide it $("#waitMask").css("opacity", "0"); setTimeout(function() { $("#waitMask").hide(); }, 500) // wait for animation to end
HTML：
<body> <div id="waitMask" style="display:none;"> </div> ... rest of html ...
