ajax调用时更改鼠标指针

Question

我想在运行AJAX调用时将鼠标指针更改为"Wait"符号,并在完成调用后返回默认指针.我试过如下但我的问题是它只是在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更改为$(this).addClass('busy');当您想要将光标更改为仅调用时$(this).removeClass('busy');