在整个HTML页面上等待光标

89

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

  1. 如果元素（＃id1）设置了一个游标样式，则它将忽略主体上的一个（显然）
  2. 一些元素具有默认的光标样式（a），并且不会在悬停时显示等待光标
  3. 根据内容的不同，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>

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

javascript  html  css  dynamic-css 
— 阿列里斯
source
看来我无法更改选择元素的光标。是否也可以更改select元素的光标？
— Biswanath

Answers:

33

我了解您可能对此无能为力，但您可能会选择一个“遮罩” div，该div覆盖整个身体且z索引大于1。div的中央部分可以包含一个加载消息（如果您愿意）。

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

身体{身高：100％；}
div＃mask {光标：等待；z索引：999；高度：100％; 宽度：100％; }
— 埃里克·温德林
source
3
这通常会引起问题。在Firefox中，在整个页面上放置固定的div会导致整个页面无法点击。即，您不能单击链接，因为您没有单击链接，而是单击链接前面的div。
— Kibbee
1
在Firefox中可以正常工作。在IE中没有运气:(。在IE中，它的行为就像没有div一样。具有所需行为的唯一方法是在div背景上设置颜色
— 。– Aleris
2
好了，再玩了一点，终于可以使用：div＃mask {display：none; 光标：等待；z索引：9999；位置：绝对；最高：0; 左：0；高度：100％; 宽度：100％; 背景颜色：#fff; 不透明度：0；过滤器：alpha（opacity = 0）;}
— Aleris
同意，Kibbee，这实际上取决于您想要的行为。听起来Aleris希望用户在AJAX回叫之前不做任何事情（因此，等待光标）。
— 埃里克·温德林
3
我使用position：fixed，所以它始终在屏幕上，而position：absolute在我位于页面底部时不会显示。
— Jj。
111

如果您使用从多沃德（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"); });
});
— 丹妮
source
4
我真的很想用这个答案...为什么它不是公认的？
— gloomy.penguin
1
@ gloomy.penguin这个问题在我回答之前已有三年多的时间了，但是我在寻找解决方案时碰巧遇到了这个问题，因此决定分享我最终使用的解决方案：Dorward的回答jQuery，和凯尔的好感。它与OP的要求有所不同，但如果它对您有用，请使用它！:)
— Dani
我同意。效果很好，恕我直言，它应该是公认的答案。
— savehansson 2014年
1
如果这不适合您，请检查以下位置：JQuery.com “从JQuery 1.9开始，全局Ajax事件仅在文档元素上触发。” 例如：$(document).ajaxStart(function () { $("html").addClass("wait"); });
— Debbie A
1
在删除等待类之前，您可能要检查是否$.active为0，以防发出多个请求并且它们都尚未完成。
— Shane Reustle '16
12

这似乎在Firefox中工作

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

*部分可确保将鼠标悬停在链接上时光标不会发生变化。尽管链接仍然可以单击。

— 基比
source
* {光标：等待！重要；}会更简单，并且更有可能在IE中工作（其中有很多使用牢靠关键字的bug）
— Quentin
1
可以从JavaScript中应用* {cursor：wait}吗？-除了遍历整个DOM中的所有元素：)
— Aleris
也许您可以添加样式元素并设置innerHTML。不会很优雅，但可能会起作用。
— Kibbee
3
.wait，.wait * {cusor：等待！重要；}，然后设置document.body.className ='wait'; 使用JavaScript
— Quentin
1
请注意，以上注释中有“光标”的错字，以防您复制/粘贴。
— devios1 2013年
7

今天，我已经为这个问题苦苦挣扎了几个小时。基本上，一切在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中，该函数执行后显示。所以我想这个技巧也可以解决这个问题。

感谢您不胜感激的时间来感谢该帖子的作者。你真的让我开心！

— pasx
source
4

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

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

— Redbmk
source
2

您为什么不只使用那些奇特的加载图形之一（例如：http : //ajaxload.info/）？等待游标是用于浏览器本身的-因此，每当出现游标时，它都与浏览器有关，而不与页面有关。

— 不存在
source
我部分同意。至少在Windows上，如果浏览器本身正在加载页面，则显示的光标cursor: progress不是cursor: wait。使用该光标将与浏览器的用户体验更加一致。但是我真的很喜欢更改光标以表明浏览器正在运行，就像加载页面时一样的想法。
— 2013年
2

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

$('*').css('cursor','wait');
— jere_hr
source
如果您有很多内容，尤其是在一台速度较慢的计算机上，那可能会“永远”进行
— redbmk 2012年
1

尝试CSS：

html.waiting {
cursor: wait;
}

看来，如果按body原样使用该属性，html则不会在整个页面上显示等待光标。此外，如果您使用css类，则可以轻松控制其实际显示时间。

— GameFreak
source
那轮候班是什么？这是风俗吗？
— 塞巴斯
1

这是一个不需要外部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
— 科菲弗斯
source
1

我改编了埃里克·温德林（Eric Wendelin）解决方案。它将在整个身体上显示一个透明的动画叠加的wait-div，单击将在可见时被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 ...
— 乱七八糟的
source
1

我的两便士：

步骤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];
    }
}

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

— 绝种
source
1

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

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

从CSS：

html { cursor: wait; }

根据需要添加其他逻辑。

— 彼得·德·布鲁因
source
这个javascript解决方案是最好的，可以在不影响HTML负担的情况下完成工作。这比在元素上切换类要好得多，如果您的DOM中有很多节点，则切换类将非常慢。
— Rajshekar Reddy
0

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

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

— 挑衅
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.