当Ajax调用时更改鼠标指针

Question

当我们运行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";
    }
}

请问有人能帮忙修改上述代码以解决问题，让它可以在Firefox和IE中正常工作吗？

- Somi Meer

Answer 1

从jQuery 1.9开始，可以这样实现：

$(document).ajaxStart(function ()
{
    $('body').addClass('wait');

}).ajaxComplete(function () {

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

});

CSS

body.wait *, body.wait
{
    cursor: progress !important;
}

- Leniel Maccaferri

---

ajaxStart()和ajaxComplete()在jQuery 1.8中得到支持。 - Jezen Thomas

在异步环境中，建议使用进度条而不是等待。用户应该能够在异步调用进行时继续使用应用程序。 - Travis Peterson

你应该使用 ajaxStop 而不是 ajaxComplete。 - Bruno

Answer 2

建议查看jQuery的get方法。它使用简单且具有处理回调的功能，因此您无需担心如何添加代码以将鼠标光标设置回来...

http://api.jquery.com/jQuery.get/

例如...

$('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

});

- Reinstate Monica Cellio

Answer 3

这篇文章提供了一个很好的解决方案，与IT技术有关。以下是他的解决方案：

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
  }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
  });
}

然后在CSS中：

html.busy, html.busy * {  
  cursor: wait !important;  
}  

我喜欢CSS的方法，通过切换类而不是在JavaScript中实际更改CSS。对我来说，这似乎是一种更清洁的方法。

要将此应用于您的代码，请更改试图更改光标的JavaScript，只需使用$(this).addClass('busy');，然后当您想要将光标更改回来时，只需调用$(this).removeClass('busy');。

- Joel

Answer 4

简单易行的解决方案，只需将以下代码添加到您想要影响的每个页面即可：

$(document).ajaxStart(function(){ 
    $("body").addClass('ajaxLoading');
});
$(document).ajaxStop(function(){ 
    $("body").removeClass('ajaxLoading');
});

以下是CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

当然，您可以根据自己的需求进行更改，但是如果想要在每个ajax调用中显示一个简单有效的加载光标，这就是最好的方法（或者至少是我会采取的方式）。

- Joe

Answer 5

在Stack Overflow提供的所有答案对我都不起作用。我正在使用最新版本的Firefox进行开发，并且其他人在这里使用IE、Chrome等。每次我调用jQuery的AJAX时，什么也不会发生，只有当AJAX调用返回时光标才会改变。然后它就会被卡在等待光标上。所以-调用已经完成，服务器返回新信息，信息已经显示，然后砰!等待光标显示出来，但又不消失。我尝试了所有给出的答案。.ajaxXXXX这些东西都被调用了。（我把一个ALERT("HERE");放到函数中，那些"HERE"一直出现。每个调用都是如此。非常沮丧。

所以我想：“好的-新的东西不起作用。老方法怎么样？”我知道这样做很繁琐-但这不是我正在开发的一个大型程序。这只是一个小编辑器，让几个人可以同时编辑我们的数据库。永远不会见到互联网的光芒。只有内网。:-) 无论如何，这个方法很好用。你需要提供自己的等待光标。我只是从Google Images上找了一个来使用。

首先-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>

然后是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%'
    });

并且

$(document).ajaxStart(function(){ waitCursor(); })
    .ajaxComplete(function(){ defCursor(); })
    .ajaxStop(function(){ defCursor(); });

这是老派但也很简单的方法。只需在一个DIV中放置一个表格。该表格仅有两行。第一行占据整个屏幕高度的50％。第二行只是将等待光标居中显示在屏幕上。您可以始终将第一行的高度设置为45％，或者是屏幕高度的一半减去图像高度的一半。但正如我所说-这只是用于简单的内部程序。事实是-这适用于所有浏览器，而不需要费尽周折来让它显示出来。我在其他主要网站上看到过类似的东西。因此，显然有人对浏览器在需要时没有显示等待光标感到厌烦，说实话-我记得看到这个并想知道复制它有多难。现在我知道了-这根本不难。

玩得开心！

- Mark Manning

Answer 6

  $('html, body').css("cursor", "wait");  

在调用 AJAX 之前使用此代码

然后：

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

在成功函数中，

例子：

  $('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);
                                   }
                                });      

- Yaser Saffo

Answer 7

在你的主函数中添加以下内容：

$('html, body').css("cursor", "wait");  

然后声明这个函数（它是ajax的结果）：

function returnedValues () {    
  if (xmlhttp.readyState==4) 
  {      
     $('html, body').css("cursor", "auto");   
  }  
} 

并且将会非常出色 :)

- GingerHead

---

它不起作用，因为ajax的答案来得非常快，所以它很快就被交换了！你需要设置一些计时器才能使其正常工作。但我认为你不需要这样做，算法是正确的！ - GingerHead

但是现在它还是不起作用，我该怎么办呢？我不希望当用户按下鼠标时等待光标消失，直到ajax调用完成。 - Somi Meer

我告诉你，它的功能是正确的。ujac调用完成得非常快，以至于它从来没有时间改变，对吧？放置计时器来测试。 - GingerHead