javascript - 等待光标在整个 html 页面上

Question

是否可以以简单的方式在整个 html 页面上将光标设置为“等待”？这个想法是向用户显示在完成 ajax 调用时正在发生的事情。下面的代码显示了我尝试过的简化版本，还演示了我遇到的问题：

如果一个元素 (#id1) 设置了光标样式，它将忽略 body 上的一组（显然）
某些元素具有默认光标样式 (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>

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

score 113 · Accepted Answer

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

score 35 · Accepted Answer

我知道您可能无法控制这一点，但您可能会选择一个覆盖整个主体的“屏蔽”div，z-index 高于 1。如果您愿意，div 的中心部分可以包含加载消息。

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

身体{身高：100%；}
div#mask { 光标：等待；z指数：999；高度：100%；宽度：100%；}

score 12 · Accepted Answer

这似乎在Firefox中工作

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

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

score 7 · Accepted Answer

今天我已经为这个问题苦苦挣扎了好几个小时。基本上一切都在 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。你真的让我很开心！！！

score 4 · Accepted Answer

4

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

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

于 2012-10-19T01:26:19.673 回答

score 3 · Accepted Answer

3

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

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

于 2012-07-25T07:08:08.463 回答

score 2 · Accepted Answer

为什么不只使用其中一种精美的加载图形（例如：http ://ajaxload.info/ ）？等待光标是针对浏览器本身的——所以每当它出现时，它与浏览器有关，而不是与页面有关。

score 1 · Accepted Answer

试试css：

html.waiting {
cursor: wait;
}

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

score 1 · Accepted Answer

这是一个不需要外部 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

score 1 · Accepted Answer

我使用了对Eric Wendelin解决方案的改编。它将在整个主体上显示一个透明的动画覆盖等待div，点击将被等待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 ...

score 1 · Accepted Answer

我的两便士：

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

var vArrOriginalCursors = new Array(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 传递的所需游标

第三步：恢复页面上的光标

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

我已经在应用程序中运行了它，它工作正常。唯一需要注意的是，当您动态添加元素时，我没有对其进行测试。

score 1 · Accepted Answer

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

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

来自 CSS：

html { cursor: wait; }

根据需要添加更多逻辑。

score 0 · Accepted Answer

0

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

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

于 2013-09-10T17:11:19.710 回答

score 0 · Accepted Answer

这个纯 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");

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

javascript - 等待光标在整个 html 页面上

14 回答 14

Related

Reference