Javascript ajax调用时更改鼠标指针
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8805507/
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
Change Mouse pointer when ajax call
提问by Somi Meer
I want to change the mouse pointer to the "Wait" symbol when we run the AJAX call and return back to default pointer after completing the call. I have tried as follows but my problem is it's just working on Firefox until I dont click/press the mouse button. Here is my code:
我想在运行 AJAX 调用时将鼠标指针更改为“等待”符号，并在完成调用后返回默认指针。我已尝试如下，但我的问题是它只是在 Firefox 上工作，直到我不单击/按下鼠标按钮。这是我的代码：
function initializeAjax(url){
$('html, body').css("cursor", "wait");
try {
if (url.substring(0,4) == ".mdf") {
var database = window.location.pathname.slice(0,window.location.pathname.lastIndexOf('.mdf'));
var url = database + url;
}
initRequest(url);
returnedValues = null;
req.onreadystatechange = returnedValues;
nocache = Math.random();
req.open("GET", url+"&nocache = "+nocache, false);
req.send(null);
$('html, body').css("cursor", "auto");
return req.responseText;
}
catch(err) {
return "Error 8";
}
}
Could anyone please help how to change above to solve the problem soo that it shud work in Firefox and IE too.
任何人都可以帮助如何更改上面的内容以解决问题，以便它也可以在 Firefox 和 IE 中正常工作。
采纳答案by Reinstate Monica Cellio
Have a look at the jQuery get method. It's very simple to use and handles callback as well, so you'll have no problem adding the code to set the mouse cursor back...
看看 jQuery get 方法。使用和处理回调也非常简单，因此您可以毫无问题地添加代码以将鼠标光标设置回...
http://api.jquery.com/jQuery.get/
http://api.jquery.com/jQuery.get/
Example...
例子...
$('html, body').css("cursor", "wait");
$.get("yourajaxcall.url", function(data) {
$('html, body').css("cursor", "auto");
// Success - do something with "data" here
}).error(function() {
$('html, body').css("cursor", "auto");
// There was an error - do something else
});
回答by Leniel Maccaferri
As of jQuery 1.9, this is how this can be done:
从jQuery 1.9 开始，这是如何做到的：
$(document).ajaxStart(function ()
{
$('body').addClass('wait');
}).ajaxComplete(function () {
$('body').removeClass('wait');
});
CSS
CSS
body.wait *, body.wait
{
cursor: progress !important;
}
回答by Joel
This post herehas a great solution for the problem.
这篇文章在这里有一个很好的解决方案。
Here's his solution:
这是他的解决方案：
function globalAjaxCursorChange()
{
$("html").bind("ajaxStart", function(){
$(this).addClass('busy');
}).bind("ajaxStop", function(){
$(this).removeClass('busy');
});
}
And then in the CSS:
然后在 CSS 中：
html.busy, html.busy * {
cursor: wait !important;
}
I like the CSS approach and toggling a class rather than actually changing the CSS in the Javascript. Seems like a cleaner approach to me.
我喜欢 CSS 方法和切换类，而不是实际更改 Javascript 中的 CSS。对我来说似乎是一种更清洁的方法。
To apply this to your code specifically, you would change the Javascript that is trying to change the cursor to just $(this).addClass('busy');then when you want to change the cursor back just call $(this).removeClass('busy');
要将其具体应用于您的代码，您可以将尝试更改光标的 Javascript 更改为刚才，$(this).addClass('busy');当您想将光标更改回时，只需调用$(this).removeClass('busy');
回答by Joe
Simple and easy solution, just add the following code to each page you want to be affected:
简单易行的解决方案，只需在每个要影响的页面中添加以下代码即可：
$(document).ajaxStart(function(){
$("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){
$("body").removeClass('ajaxLoading');
});
And the CSS:
和 CSS：
.ajaxLoading {
cursor: progress !important;
}
Of course, you can change this according to your needs, but for a simple effective way to display a loading cursor on every ajax call, this is the way to go (Or at least, the way I would do it).
当然，您可以根据需要更改此设置，但是对于在每个 ajax 调用上显示加载光标的简单有效方法，这是要走的路（或者至少，我会这样做）。
回答by Mark Manning
None of the answers provided here on Stack Overflow would work for me. I'm using the latest and greatest FireFox for development and others here use IE, Chrome, etc.... Every time I made a call to jQuery's AJAX nothing would happen and ONLY when the AJAX call came back - would the cursor change. Then it would be stuck in the wait cursor. So - the call is made, the server returned the new information, the information was displayed and then WHAM! Wait cursor displays and won't go away. I tried ALL of the answers given. The .ajaxXXXX stuff were being called. (I put an ALERT("HERE"); into the functions and those "HERE"'s showed up all of the time. Every single call. Very depressing.
Stack Overflow 上提供的所有答案都不适合我。我正在使用最新最好的 FireFox 进行开发，而这里的其他人使用 IE、Chrome 等......每次我调用 jQuery 的 AJAX 时都不会发生任何事情，并且只有当 AJAX 调用返回时 - 光标才会改变。然后它会卡在等待光标中。所以 - 调用，服务器返回新信息，显示信息然后WHAM！等待光标显示并且不会消失。我尝试了所有给出的答案。.ajaxXXXX 的东西被调用了。（我将 ALERT("HERE"); 放入函数中，那些“HERE”一直出现。每次调用。非常令人沮丧。
So I went "Ok - new stuff doesn't work. What about going old school?" I know it is clunky to do so - but this isn't some great big program I'm working on. It's just a little editor so several people can edit our database at the same time. Never going to see the light of the internet. Only the intranet. :-) Anyway, this works and works terrifically. You need to provide your own wait cursor. I just grabbed one off of Google Images to use.
所以我说“好吧 - 新东西不起作用。去老学校怎么样？” 我知道这样做很笨拙 - 但这不是我正在开发的一些很棒的大程序。它只是一个小编辑器，所以几个人可以同时编辑我们的数据库。永远不会看到互联网的光芒。只有内网。:-) 无论如何，这很有效，而且效果很好。您需要提供自己的等待游标。我只是从 Google 图片中抓取了一张来使用。
First - the HTML:
首先 - HTML：
<div id='wait' name='wait'
style='position:absolute;top:-9999px;left:-9999px;background-color:rgba(0,0,0,0.3);'>
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%;'><tbody>
<tr><td style='width:100%;height:50%;'> </td></tr>
<tr><td align='center'><img id='cursor' name='cursor' src="images/wait.gif"></td></tr>
</tbody></table>
</div>
Then the jQuery:
然后是jQuery：
function waitCursor()
{
$('#wait').css({
'top' : '0px',
'left' : '0px',
'width' : '100%',
'height' : '100%'
});
}
function defCursor()
{
$('#wait').css({
'top': '-9999px',
'left' : '-9999px',
'width' : '0%',
'height' : '0%'
});
and
和
$(document).ajaxStart(function(){ waitCursor(); })
.ajaxComplete(function(){ defCursor(); })
.ajaxStop(function(){ defCursor(); });
Old school but simple also. Just has a DIV with a table in it. The table has only to rows. The first one is 50% of the height of the entire screen. The second one simply centers the wait cursor on the screen. You could always make the height of the first one 45% or whatever half the height of the screen is minus half the height of the image. But as I said - this is just for a simple in-house program. The thing is - this works on all browsers without trying to jump through a lot of hoops to get it to show up. I've seen something similar on other major websites. So obviously others have gotten fed-up over the browsers not showing a wait cursor when needed and truth to tell - I remembered seeing this and wondered just how hard it would be to replicate. Now I know - it isn't hard at all.
老派但也简单。只是有一个带有表格的 DIV。该表只有行。第一个是整个屏幕高度的 50%。第二个只是将等待光标在屏幕上居中。您始终可以将第一个的高度设为 45%，或者屏幕高度的一半减去图像高度的一半。但正如我所说 - 这只是一个简单的内部程序。问题是 - 这适用于所有浏览器，而无需尝试跳过很多箍来显示它。我在其他主要网站上看到过类似的内容。很明显，其他人已经厌倦了浏览器在需要时没有显示等待光标和说实话 - 我记得看到过这个并想知道复制会有多难。现在我知道了——这并不难。
Have fun!
玩得开心！
回答by Yaser Saffo
$('html, body').css("cursor", "wait");
Use this code before calling AJAX
在调用 AJAX 之前使用此代码
Then:
然后：
$('html, body').css("cursor", "default");
In the success function
在成功函数中
Example:
例子：
$('html, body').css("cursor", "wait");
$.ajax({
url://your url ,
type: //your type post or get
dataType: "html",
data: //data send by ajax
success: function(returnData){
$('html, body').css("cursor", "default");
//any other actions ....
},
error: function(e){
alert(e);
}
});
回答by tani
$('html, body').css("cursor", "wait"); is working perfectly
$('html, body').css("cursor", "wait"); 工作正常
回答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.
我不喜欢简单地将 css 属性添加到 body 标签的解决方案：如果您已经将光标分配给您的元素，它就不会起作用。
Have a look on my solution here: https://stackoverflow.com/a/26183551/1895428
在这里查看我的解决方案：https: //stackoverflow.com/a/26183551/1895428
回答by GingerHead
In your main function add the following:
在您的主函数中添加以下内容：
$('html, body').css("cursor", "wait");
then declare this function (which is the ajax result):
然后声明这个函数（这是ajax结果）：
function returnedValues () {
if (xmlhttp.readyState==4)
{
$('html, body').css("cursor", "auto");
}
}
And will work amazingly :)
并且会惊人地工作:)
