ajax 호출 시 마우스 포인터 변경

ajax 호출 시 마우스 포인터 변경

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";
    }
}

파이어폭스와 IE에서도 작동할 수 있도록 위에서 문제를 해결하는 방법을 도와줄 수 있는 사람이 있습니까?

jQuery 1.9에서는 다음과 같이 처리할 수 있습니다.

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

}).ajaxComplete(function () {

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

});

CSS

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

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

});

여기 이 게시물은 문제에 대한 훌륭한 해결책을 가지고 있습니다.

그의 해결책은 다음과 같습니다.

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

그리고 CSS에서:

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

저는 자바스크립트에서 CSS를 실제로 변경하는 것보다 CSS 접근과 클래스 토글링을 좋아합니다.제가 보기엔 좀 더 깔끔한 것 같네요.

이것을 당신의 코드에 구체적으로 적용하기 위해서는 커서를 바꾸려는 자바스크립트를 그냥$(this).addClass('busy');그런 다음 커서를 다시 바꾸고 싶을 때 전화하기만 하면 됩니다.$(this).removeClass('busy');

간편하고 간편한 솔루션, 영향을 받으려는 각 페이지에 다음 코드를 추가하기만 하면 됩니다.

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

그리고 CSS:

.ajaxLoading {  
  cursor: progress !important;  
}  

물론 필요에 따라 이를 변경할 수도 있지만, 모든 ajax 호출 시 로딩 커서를 표시하는 간단한 효과적인 방법을 위해서는 이것이 (적어도 내가 하는 방식) 가야 할 길입니다.

스택 오버플로에 대해 여기에 나와 있는 어떤 답변도 저에게 도움이 되지 않습니다.저는 개발을 위해 최신 최고의 FireFox를 사용하고 있으며 여기 있는 다른 회사들은 IE, Chrome 등을 사용하고 있습니다.제가 jQuery의 AJAX에 전화를 걸 때마다 아무 일도 일어나지 않으며, AJAX의 전화가 다시 왔을 때에만 커서가 바뀝니다.그러면 대기 커서에 고정됩니다.그래서 - 전화가 오고, 서버가 새로운 정보를 반환하고, 정보가 표시되고, 그 다음에 WHAM!대기 커서가 표시되고 사라지지 않습니다.저는 주어진 답을 모두 시도해 보았습니다..ajaxXXXXX라는 것이 호출되고 있었습니다.(저는 ALERT("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% 또는 화면 높이의 절반에서 이미지 높이의 절반을 뺀 값을 항상 만들 수 있습니다.하지만 제가 말했듯이, 이는 단순한 사내 프로그램을 위한 것입니다.중요한 것은, 이것은 모든 브라우저에서 작동한다는 것입니다. 많은 후프를 통과하지 않고도 그것이 나타나도록 할 수 있습니다.다른 주요 웹사이트에서도 비슷한 것을 본 적이 있습니다.그래서 다른 사람들은 브라우저가 필요할 때 대기 커서를 표시하지 않는 것과 진실을 말해주는 것에 진저리를 친 것이 분명합니다. 저는 이것을 본 것을 기억하고 복제하는 것이 얼마나 어려울지 궁금했습니다.이제 알아요. 전혀 어렵지 않아요.

재미있게 보내!

메인 기능에서 다음을 추가합니다.

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

그런 다음 이 함수를 선언합니다(이것이 ajax 결과입니다).

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

그리고 일이 잘 될 것입니다 :)

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

언급URL : https://stackoverflow.com/questions/8805507/change-mouse-pointer-when-ajax-call