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 1.9开始 ，这是如何做到的：

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

}).ajaxComplete(function () {

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

});

CSS

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

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

});

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

Stack Overflow上提供的答案都不适用于我。 我正在使用最新最好的FireFox进行开发，其他人在这里使用IE，Chrome等....每次我调用jQuery的AJAX时都不会发生任何事情，只有当AJAX调用回来时 - 光标会改变。 然后它会卡在等待光标中。 所以 - 调用，服务器返回新信息，信息显示然后WHAM！ 等待光标显示，不会消失。 我尝试了所有给出的答案。 正在调用.ajaxXXXX的东西。 （我把一个警告（“HERE”）;放入功能中，“HERE”的所有时间都出现了。每一个电话。非常令人沮丧。

所以我去了“好吧 - 新的东西不起作用。去上学怎么样？” 我知道这样做很笨 - 但这不是我正在研究的一些重大计划。 它只是一个小编辑器，所以有几个人可以同时编辑我们的数据库。 永远不会看到互联网的光芒。 只有内联网。 :-)无论如何，这工作和工作非常。 您需要提供自己的等待光标。 我只是抓了一个谷歌图片来使用。

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

我不喜欢简单地将css属性添加到body标签的解决方案：如果你已经为你的元素分配了一个游标，它就无法工作。

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

Answer 7

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

$（'html，body'）。css（“cursor”，“wait”）; 工作得很好

Answer 9

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

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

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

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

并将工作惊人:)