사용자가 마우스를 움직이지 않고 브라우저 커서를 "대기"에서 "자동"으로 가져 오기

사용자가 마우스를 움직이지 않고 브라우저 커서를 "대기"에서 "자동"으로 가져 오기

---

이 jQuery 코드를 사용하여 Ajax 호출 중에 마우스 포인터를 사용 중 상태 (모래 시계)로 설정합니다.

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

그리고이 코드를 정상으로 되돌리려면 ...

$('body').css('cursor', 'auto');

이것은 일부 브라우저에서 잘 작동합니다.

Firefox와 IE에서는 명령을 실행하자마자 마우스 커서가 변경됩니다. 이것이 내가 원하는 행동입니다.

Chrome 및 Safari에서 마우스 커서는 사용자가 포인터를 이동할 때까지 "사용 중"에서 "자동"으로 눈에 띄게 변경되지 않습니다.

꺼리는 브라우저가 마우스 포인터를 전환하도록하는 가장 좋은 방법은 무엇입니까?

---

현재 두 브라우저 모두에서 버그입니다. 두 링크 모두에 대한 자세한 내용 (코멘트 포함) :

http://code.google.com/p/chromium/issues/detail?id=26723

과

http://code.google.com/p/chromium/issues/detail?id=20717

---

차라리 더 우아하게 할 것입니다.

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

CSS :

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

출처 : http://postpostmodern.com/instructional/global-ajax-cursor-change/

---

이 문제 (마우스 다운 문제 포함)가 이제 Chrome 50에서 해결되었다고 생각합니다.

하지만 개발자 도구를 사용하지 않는 경우에만 !!

도구를 닫으면 커서가 즉시 더 잘 반응합니다.

---

Korayem 솔루션에서 영감을 얻었습니다.

자바 스크립트 :

jQuery.ajaxSetup({
    beforeSend: function() {
       $('body').addClass('busy');
    },
    complete: function() {
       $('body').removeClass('busy');
    }
});

CSS :

.busy * {
    cursor: wait !important;
}

Chrome, Firefox 및 IE 10에서 테스트되었습니다. 마우스를 움직이지 않고 커서가 변경됩니다. IE10에는 "! important"가 필요합니다.

편집 : AJAX 요청이 완료된 후에도 IE 10에서 커서를 이동해야합니다 (따라서 일반 커서가 나타남). 마우스를 움직이지 않고 대기 커서가 나타납니다 ..

---

우선, 본문 내의 태그에 커서가 할당되어 있으면 해당 태그 $('body').css('cursor', 'wait');의 커서가 변경되지 않습니다 (나와 같이 cursor: pointer;모든 앵커 태그에 사용). 이 특정 문제에 대한 내 솔루션을 먼저보고 싶을 수도 있습니다. 커서가 ajax 호출을 기다립니다.

다른 사람들이 말했듯이 사용자가 웹킷 브라우저에서 마우스를 움직일 때만 커서가 업데이트되는 문제에 대해서는 실제 해결책이 없습니다.

즉, CSS 스피너를 현재 커서에 동적으로 추가하는 경우 여전히 해결 방법이 있습니다. 커서의 크기와 스피너의 위치를 ​​정확히 알지 못하기 때문에 이것은 완벽한 솔루션이 아닙니다.

커서 뒤에 오는 CSS 스피너 : DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

터치 장치인지 확인해야합니다. var isTouchDevice = typeof window.ontouchstart !== 'undefined';

In conclusion, you better try to add in your page a static spinner or something else that shows the loading process instead of trying to do it with the cursor.

---

Korayem's solution works for me in 100% cases in modern Chrome, Safari, in 95% cases in Firefox, but does not work in Opera and IE.

I improved it a bit:

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

CSS:

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

html.notbusy, html.notbusy * {
    cursor: default !important;
}

Now it works in 100% cases in Chrome, Safari, Firefox and Opera. I do not know what to do with IE :(

---

Working solution on CodeSandbox

Some of the other solutions do not work in all circumstances. We can achieve the desired result with two css rules:

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

.not-busy {
  cursor: auto;
}

The former indicates that we are busy and applies to all elements on the page, attempting to override other cursor styles. The latter applies only to the page body and is used simply to force a UI update; we want this rule to be as non-specific as possible and it doesn't need to apply to other page elements.

We can then trigger and end the busy state as follows:

function onBusyStart() {
    document.body.classList.add('busy');
    document.body.classList.remove('not-busy');
}

function onBusyEnd() {
    document.body.classList.remove('busy');
    document.body.classList.add('not-busy');
}

In summary, although we have to change the cursor style to update the cursor, directly modifying document.body.style.cursor or similar does not have the intended effect, on some engines such as Webkit, until the cursor is moved. Using classes to affect the change is more robust. However, in order to reliably force the UI to update (again, on some engines), we have to add another class. It seems removing classes is treated differently from adding them.

---

I don't think you'll be able to do it.

However, try changing the scroll position; it might help.

---

HERE is my solution:

function yourFunc(){

$('body').removeClass('wait'); // this is my wait class on body you can $('body').css('cursor','auto');
$('body').blur();
$('body').focus(function(e){
$('body')
 .mouseXPos(e.pageX + 1)
 .mouseYPos(e.pageX - 1);
});

}

---

As of jquery 1.9 you should ajaxStart and ajaxStop to document. They work fine for me in firefox. Have not tested in other browsers.

In CSS:

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

In javaScript:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

---

Try using the correct css value for the cursor property:

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

http://www.w3schools.com/CSS/pr_class_cursor.asp

---

It's probably a bug in WebKit; you should report it.

---

I haven't tried this, but what about if you create a transparent div that is absolutely positioned and fills the viewport just before changing the CSS. Then, when the css is changed on the body, remove the div. This might trigger a mouseover event on the body, which might cause the cursor to update to the latest CSS value.

Again, I haven't tested this, but it's worth a shot.

---

Hey Guys, I have a nitty gritty solution which works on all browsers. Assumption is protoype library is used. Someone can write this as plain Javascript too. The solution is to have a div on top of all just after you reset the cursor and shake it a little bit to cause the cursor to move. This is published in my blog http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html.

---

$('*').css('cursor','wait'); will work everywhere on the page including links

참고URL : https://stackoverflow.com/questions/1718415/getting-the-browser-cursor-from-wait-to-auto-without-the-user-moving-the-mou