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中也有效。

Answer 1

看看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

});

Answer 2

作为 jQuery 1.9, ，这就是可以做到的：

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

}).ajaxComplete(function () {

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

});

CSS

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

Answer 3

这篇文章在这里 为问题有一个很好的解决方案。

这是他的解决方案：

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');

Answer 4

简单简便的解决方案，只需将以下代码添加到要受到影响的每个页面：

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

和CSS：

.ajaxLoading {  
  cursor: progress !important;  
}  

当然，您可以根据自己的需求进行更改，但是对于每次Ajax调用显示加载光标的简单方法，这就是要走的路（或者至少是我这样做的方式）。

Answer 5

堆栈溢出上的任何答案都不适合我。我正在使用最新，最伟大的Firefox进行开发，而其他人则使用IE，Chrome等。...每次我打电话给Jquery的Ajax都不会发生任何事情，只有当Ajax呼叫回来时，光标会更改。然后它将被困在等待光标中。因此 - 呼叫是拨打的，服务器返回了新信息，显示了信息，然后又显示了！等待光标显示，不会消失。我尝试了所有给出的答案。 .ajaxxxxx被称为。 （我提出警报（“此处”）；在函数中，并且“这里”一直出现。每个呼叫都非常令人沮丧。

所以我走了“好吧 - 新东西不起作用。去老学校呢？”我知道这样做很笨拙 - 但这并不是我正在努力的大型计划。这只是一个小编辑器，因此有几个人可以同时编辑我们的数据库。永远不会看到互联网的光。只有Intranet。 :-)无论如何，这起作用并奏效。您需要提供自己的等待光标。我刚刚从Google图像中抓取了一个。

首先 - 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％的高度或屏幕高度的任何一半的高度减去图像高度的一半。但是正如我所说 - 这仅适用于一个简单的内部计划。问题是 - 这在所有浏览器上都可以使用，而无需尝试跳过很多箍以使其显示出来。我在其他主要网站上看到了类似的东西。因此，显然，其他人对浏览器的受够了，在需要时没有显示等待光标，而且要说的是真相 - 我记得看到这一点，并想知道复制会有多困难。现在我知道 - 一点也不困难。

玩得开心！

Answer 6

在您的主要功能中添加以下内容：

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

然后声明此功能（这是AJAX结果）：

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

并会惊人的工作:)

Answer 7

我不喜欢简单地将CSS属性添加到车身标签的解决方案：如果您已经将光标分配给元素，它将无法使用。

在这里查看我的解决方案：https://stackoverflow.com/a/26183551/1895428

Answer 8

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

Answer 9

$（'html，身体'）。css（“光标”，“ wait”）;正常工作