将光标更改为在javascript / jquery中等待

118

在此处输入图片说明

调用函数时，如何将光标更改为该加载图标，如何在javascript / jquery中将其更改为普通光标

javascript jquery html

— 艾哈迈德
source

7

如果您只需要此游标，则需要指定一个URL，否则（使用Roberts解决方案）每个用户都将看到加载游标，具体取决于其操作系统。

— Christoph

1

Christoph，我当前正在Windows 7上的其他操作系统会“等待”显示什么，因为目前看起来还不错

— ahmet 2012年

2

好吧，在远景中，它会显示与Windows 7中相同的光标，但是由于动画的损坏，在较旧的Windows OS上它将显示良好的沙漏，而在Linux或Mac OS上它将显示各自的“等待”光标。我也建议不要操纵用户光标，因为它通常与OS操作相关联，而是直接在您的网页上提供诸如此类的稍候动画，这有助于用户乍看之下等待操作是由您的网站而不是操作系统引起的。

— Christoph

1

又见stackoverflow.com/questions/192900/...

— 布赖恩·伯恩斯

1

台式机的好主意，移动电话的好主意

— Please_Dont_Bully_Me_SO_Lords '19

195

在您的jQuery中使用：

$("body").css("cursor", "progress");

然后又恢复正常

$("body").css("cursor", "default");

— 罗伯特·斯坦利
source

8

我$("html,body")之所以使用，是因为页面的主体仅适合窗口的一半，因此当鼠标悬停在底部的一半上时，光标仍然是默认值。

— 基思

80

我的一位同事提出了一种比这里选择的解决方案更好的方法。首先，在CSS中，添加以下规则：

body.waiting * {
    cursor: progress;
}

然后，打开进度游标，说：

$('body').addClass('waiting');

并关闭进度游标，请说：

$('body').removeClass('waiting');

这种方法的优点是，当您关闭进度游标时，将恢复您在CSS中定义的所有其他游标。如果CSS规则的优先级不够强，无法否决其他CSS规则，则可以在正文和规则中添加ID，或使用!important。

— 赫拉比诺维茨
source

优秀的解决方案！

— Kenton de Jong

31

请不要在2018年为此使用jQuery！没有必要包括一个完整的外部库来执行一项可以通过一行完成的操作：

将光标更改为微调器： document.body.style.cursor = 'wait';

将光标恢复为正常状态： document.body.style.cursor = 'default';

— kchuang7
source

3

该页面上最有可能增加了对自定义处理游标的需求，您是不是认为呢？当然，这还不错，但是已经为其他内容加载的jQuery更改将是……嗯……100％？

— 帕特里克

由于@ahmet要求使用javascript / jquery解决方案，我认为您的答案也应如此。+1

— 哈维尔

8

以下是我的首选方式，每次页面要更改时都会更改光标，即 beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

— 夏尼帕森斯
source

1

到目前为止，这是您可以执行的最简单，最简单的实现。非常感谢。

— JC203 '16

7

使用jquery和css：

$("#element").click(function(){ 
    $(this).addClass("wait");
});

HTML： <div id="element">Click and wait</div>

CSS： .wait {cursor:wait}

在这里演示

— 图萨尔
source

这表明可以在小于整个页面的容器上显示等待光标-如果页面的其他部分仍然可以与之交互，则可能有意义。在这里，只有将鼠标悬停在上div。实际上，显示等待光标的所选项目应大于单击的项目。通常，最好将其显示在整个页面上，如公认的答案所示。

— ToolmakerSteve

6

覆盖所有单个元素

$("*").css("cursor", "progress");

— ะจ๊ะนะจ๊ะ
source

6

这种方法的问题在于，一旦等待结束，您将失去：active /：hover这样的选择器的CSS样式

— Ahmad 2014年

6

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

这将创建一个加载游标，直到您的ajax调用成功为止。

— Kanishka Panamaldeniya
source

1

@Christoph，为什么不为我们提供更好的代码答案？我肯定总是喜欢更好的代码。

— Bobort

@Bobort这个问题已经有很多不错的答案。同时它已经有4年的历史了，success并且complete在jQ3中已被删除，因此您必须继续使用$.ajax(...).always(...);可以在beforeSend函数中设置prosess光标。

— 克里斯多夫（Christoph）

6

jQuery的：
$("body").css("cursor", "progress");

再次回来
$("body").css("cursor", "default");

纯：
document.body.style.cursor = 'progress';

再次回来
document.body.style.cursor = 'default';

— xoxn-- 1'w3k4n
source

5

您不需要JavaScript。您可以使用CSS将光标更改为所需的任何内容：

selector {
    cursor: url(myimage.jpg), auto;
}

请参阅此处以获取浏览器支持，因为根据浏览器的不同会有一些细微的差异

— 芒斯
source

1

您是否不需要JavaScript来触发对其他光标的更改？

— ToolmakerSteve

@ToolmakerSteve没了-你可以使用CSS只-只是改变选择确定要使用的游标

— 万岁

3

您还可以做一些有趣的事情。定义一个函数，在每个ajax调用之前调用。在每个ajax调用完成后，还要分配一个要调用的函数。第一个功能将设置等待光标，第二个功能将其清除。它们如下所示：

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

— 肖恩·文森特
source

1

如果保存太快，请尝试以下操作：

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

— 马克·艾伦伯格
source

1

将光标设置为“ body”将更改页面背景的光标，而不更改页面背景上的控件。例如，将鼠标悬停在按钮上时，它们仍将具有常规光标。以下是我正在使用的：

要设置“等待”光标，请创建一个样式元素并插入头部：

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

然后，要恢复光标，请删除样式元素：

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

— cat_in_hat
source

0

我发现，使光标有效地将其样式重置为更改为等待样式之前的样式的唯一方法是在页面的开头或样式表或样式标签中设置原始样式，即set所讨论对象的类到样式的名称。然后，在您的等待时间之后，将光标样式设置回空字符串，而不是“默认”，并且它恢复为样式标签或样式表中设置的原始值。在等待时间之后将其设置为“默认”只会将每个元素的光标样式更改为称为指针的“默认”样式。它不会将其恢复为以前的值。

有两个条件可以使这项工作。首先，您必须在样式表或带有样式标签的页面标题中设置样式，而不是将其设置为内联样式，其次是通过将等待样式设置回空字符串来重置其样式。

— 大卫·克劳福德
source