首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在ajax调用时更改鼠标指针

在ajax调用时更改鼠标指针
EN

Stack Overflow用户
提问于 2012-01-10 23:11:26
回答 8查看 28.9K关注 0票数 23

我想在运行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中工作。

EN

回答 8

Stack Overflow用户

回答已采纳

发布于 2012-01-10 23:16:48

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

});
票数 11
EN

Stack Overflow用户

发布于 2012-01-10 23:16:51

对于这个问题,This post here有一个很好的解决方案。

以下是他的解决方案:

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。在我看来,这是一种更干净的方法。

要明确地将其应用于您的代码,您可以将尝试将光标更改为$(this).addClass('busy');的Javascript更改为,然后当您想要更改回光标时,只需调用$(this).removeClass('busy');即可

票数 6
EN

Stack Overflow用户

发布于 2015-09-11 16:56:18

简单而容易的解决方案,只需将以下代码添加到您希望受到影响的每个页面:

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

和CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

当然,您可以根据需要对其进行更改,但要想以一种简单有效的方式在每次ajax调用时显示加载光标,这就是可行的方法(至少,我会这样做)。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8805507

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档