Question

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

如果一个元素（＃id1）设置了光标样式，它将忽略正文上的一个（显然）
某些元素具有默认光标样式（a），并且不会在悬停
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>

此解决方案的问题（或功能）是因为重叠div会阻止点击（感谢Kibbee）

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

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

然后

<a href="#" onclick="document.body.className = 'wait'; return false">Do something</a>

此解决方案仅显示等待光标，但允许点击。

Answer 1

如果您使用从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"); });
});

Answer 2

我知道你可能无法控制这一点，但你可能会选择一个覆盖整个身体的“掩蔽”div，其z值大于1.如果div的中心部分可能包含加载消息你喜欢。

然后，您可以将光标设置为等待div，而不必担心链接，因为它们位于您的屏蔽div“之下”。这是“masking div”的一些示例CSS：

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

Answer 3

这似乎适用于firefox

<style>
*{ cursor: inherit;}
body{ cursor: wait;}
</style>

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

Answer 4

今天我一直在努力解决这个问题。基本上一切都在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这篇文章的作者。你真的过了我的一天!!!

Answer 5

css：.waiting * { cursor: 'wait' }

jQuery：$('body').toggleClass('waiting');

Answer 6

为什么不直接使用其中一种花哨的加载图形（例如：http://ajaxload.info/）？等待光标用于浏览器本身 - 因此无论何时出现它都与浏览器有关，而不是与页面有关。

Answer 7

我知道最简单的方法是使用这样的JQuery：

$('*').css('cursor','wait');

Answer 8

试试css：

html.waiting {
cursor: wait;
}

似乎如果属性body被用作html，它不会在整个页面上显示等待光标。此外，如果您使用css类，您可以轻松控制它何时实际显示它。

Answer 9

这是一个更精细的解决方案，不需要外部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

Answer 10

要通过JavaScript为整个窗口设置光标，请使用：

document.documentElement.style.cursor = 'wait';

从CSS：

html { cursor: wait; }

根据需要添加更多逻辑。

Answer 11

BlockUI是一切的答案。试一试。

http://www.malsup.com/jquery/block/

Answer 12

我使用了Eric Wendelin解决方案的改编版。它将在整个身体上显示一个透明的动画叠加等待，点击将被wait-div阻挡，同时可见：

的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;">&nbsp;</div>
    ... rest of html ...

Answer 13

我的两便士：

第1步：声明一个数组。这将用于存储已分配的原始游标：

var vArrOriginalCursors = new Array(2);

第2步：实现函数cursorModifyEntirePage

 function CursorModifyEntirePage(CursorType){
    var elements = document.body.getElementsByTagName('*');
    alert("These are the elements found:" + elements.length);
    let lclCntr = 0;
    vArrOriginalCursors.length = elements.length; 
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        vArrOriginalCursors[lclCntr] = elements[lclCntr].style.cursor;
        elements[lclCntr].style.cursor = CursorType;
    }
}

它的作用：获取页面上的所有元素。存储在步骤1中声明的数组中分配给它们的原始游标。将游标修改为由参数CursorType传递的所需游标

第3步：恢复页面上的游标

 function CursorRestoreEntirePage(){
    let lclCntr = 0;
    var elements = document.body.getElementsByTagName('*');
    for(lclCntr = 0; lclCntr < elements.length; lclCntr++){
        elements[lclCntr].style.cursor = vArrOriginalCursors[lclCntr];
    }
}

我在一个应用程序中运行它，它工作正常。唯一需要注意的是，当你动态添加元素时，我还没有测试过它。

Answer 14

这种纯JavaScript似乎运行良好，已在FireFox，Chrome和Edge浏览器上进行了测试。

如果页面上的元素过多且计算机运行缓慢，我不确定这样做的性能。尝试一下看看。

为所有要等待的元素设置光标：

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "wait");

将所有元素的光标设置为默认值：

Object.values(document.querySelectorAll('*')).forEach(element => element.style.cursor = "default");

另一种（也许更具可读性）版本是如下创建setCursor函数：

function setCursor(cursor)
{
    var x = document.querySelectorAll("*");

    for (var i = 0; i < x.length; i++)
    {
        x[i].style.cursor = cursor;
    }
}

然后致电

setCursor("wait");

和

setCursor("default");

分别设置等待光标和默认光标。

等待整个html页面上的光标

14 个答案: