使用 jQuery .load() 时如何更改光标以等待
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10326925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change cursor to wait when using jQuery .load()
提问by Takkun
While waiting for a response from a .load(), is there any way to change the cursor to the busy/wait cursor?
在等待 .load() 的响应时，有什么方法可以将光标更改为忙碌/等待光标？
回答by iambriansreed
Try:
尝试：
Updated to work with jQuery 1.8 +
更新到 jQuery 1.8 +
$(document).ajaxStart(function() {
$(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
$(document.body).css({'cursor' : 'default'});
});
Cursor changes on any ajax start and end. That includes .load().
任何 ajax 开始和结束时的光标都会发生变化。这包括.load().
Try out the different cursor styles here:
在此处尝试不同的光标样式：
回答by RitchieD
I had to tweak the eloquent answer above to work with jQuery > 1.8.
我必须调整上面雄辩的答案才能使用 jQuery > 1.8。
$(document).ajaxStart(function () {
$(document.body).css({ 'cursor': 'wait' })
});
$(document).ajaxComplete(function () {
$(document.body).css({ 'cursor': 'default' })
});
回答by pmrotule
I don't like the solution that simply add the css property to the body tag: it's not gonna work if you already have a cursor assigned to your element. Like me, I use cursor: pointer;on all my anchor tag. So, I came up with this solution:
我不喜欢简单地将 css 属性添加到 body 标签的解决方案：如果您已经将光标分配给您的元素，它就不会起作用。像我一样，我cursor: pointer;在我所有的锚标签上使用。所以，我想出了这个解决方案：
Create a CSS class to avoid overwriting the current cursor (to be able to go back to normal afterwards)
创建一个 CSS 类以避免覆盖当前光标（以便之后能够恢复正常）
.cursor-wait {
cursor: wait !important;
}
Create the functions to add and remove the cursor
创建用于添加和删除光标的函数
cursor_wait = function()
{
// switch to cursor wait for the current element over
var elements = $(':hover');
if (elements.length)
{
// get the last element which is the one on top
elements.last().addClass('cursor-wait');
}
// use .off() and a unique event name to avoid duplicates
$('html').
off('mouseover.cursorwait').
on('mouseover.cursorwait', function(e)
{
// switch to cursor wait for all elements you'll be over
$(e.target).addClass('cursor-wait');
});
}
remove_cursor_wait = function()
{
$('html').off('mouseover.cursorwait'); // remove event handler
$('.cursor-wait').removeClass('cursor-wait'); // get back to default
}
Then create your ajax function (I don't use events like ajaxStart or ajaxStop because I don't want to use cursor wait with all my ajax call)
然后创建您的 ajax 函数（我不使用 ajaxStart 或 ajaxStop 之类的事件，因为我不想在所有 ajax 调用中使用光标等待）
get_results = function(){
cursor_wait();
$.ajax({
type: "POST",
url: "myfile.php",
data: { var : something },
success: function(data)
{
remove_cursor_wait();
}
});
}
I'm not very familiar with jQuery load(), but I guess it will be something like this:
我对 jQuery load() 不是很熟悉，但我想它会是这样的：
$('button').click(function()
{
cursor_wait();
$('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)
{
if (statusTxt == "success")
{ remove_cursor_wait(); }
});
});
Hope it helps!
希望能帮助到你！
回答by mprabhat
You can use this:
你可以使用这个：
$('body').css('cursor', 'progress');
before you start loading and once complete change the cursor to auto
在开始加载之前，完成后将光标更改为自动
回答by MConrad
Try:
尝试：
$(document).ajaxStart(function () {
$('body').css('cursor', 'wait');
}).ajaxStop(function () {
$('body').css('cursor', 'auto');
});
As of jQuery 1.8, the .ajaxStop() and the .ajaxComplete() methods should only be attached to document.
从 jQuery 1.8 开始， .ajaxStop() 和 .ajaxComplete() 方法应该只附加到文档。
Interchanging .ajaxStop() with .ajaxComplete() both gave me satisfactory results.
将 .ajaxStop() 与 .ajaxComplete() 互换都给了我满意的结果。
回答by Iori Yagami
I hope this helps
我希望这有帮助
$("body").css('cursor','wait');
//or
$("body").css('cursor','progress');
greetings
你好
回答by eselk
I tried the various methods I found here and other places and decided there are too many bugs in various browsers (or even setups, like RDP/VNC/Terminal users) with changing the mouse cursor. So instead I ended up with this:
我尝试了在这里和其他地方找到的各种方法，并确定在更改鼠标光标时，各种浏览器（甚至设置，如 RDP/VNC/终端用户）中存在太多错误。所以我最终得到了这个：
Inside my app init code that fires after document ready:
在文档准备好后触发的应用程序初始化代码中：
// Make working follow the mouse
var working = $('#Working');
$(document).mousemove(function(e) {
working.css({
left: e.pageX + 20,
top: e.pageY
});
});
// Show working while AJAX requests are in progress
$(document).ajaxStart(function() {
working.show();
}).ajaxStop(function() {
working.hide();
});
And towards the end of my HTML, just inside the body I have:
在我的 HTML 结束时，就在我的身体内部：
<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>
It works a lot like the "app loading" mouse cursor in Windows, where you still get your normal cursor, but you can also tell that something is happening. This is ideal in my case because I want the user to feel they can still do other stuff while waiting, since my app handles that pretty well so far (early stages of testing).
它的工作原理很像 Windows 中的“应用程序加载”鼠标光标，在那里您仍然可以获得正常的光标，但您也可以知道正在发生某些事情。这在我的情况下是理想的，因为我希望用户觉得他们在等待时仍然可以做其他事情，因为到目前为止我的应用程序处理得很好（测试的早期阶段）。
My loading.gif file is just a typical spinning wheel, about 16x16 pixels, so not too annoying, but obvious.
我的 loading.gif 文件只是一个典型的旋转轮，大约 16x16 像素，所以不太烦人，但很明显。
回答by Brad
Change the body's CSS to cursor: progress.
将主体的 CSS 更改为cursor: progress.
To do this, just make a "waiting" class with this CSS, and then add/remove the class from the body.
为此，只需使用此 CSS 创建一个“等待”类，然后从主体中添加/删除该类。
CSS:
CSS：
.waiting {
cursor: progress;
}
Then in your JS:
然后在你的 JS 中：
$('body').addClass('waiting');
You can remove it later with .removeClass.
您可以稍后使用.removeClass.
