javascript/jquery에서 커서를 waiting으로 변경

javascript/jquery에서 커서를 waiting으로 변경

함수가 호출될 때 커서를 이 로드 아이콘으로 변경하려면 어떻게 해야 하며 자바스크립트/jquery에서 일반 커서로 다시 변경하려면 어떻게 해야 합니까?

jQuery에서 다음을 사용합니다.

$("body").css("cursor", "progress");

그리고 다시 정상으로 돌아갔습니다.

$("body").css("cursor", "default");

동료가 여기서 선택한 솔루션보다 선호하는 접근 방식을 제안했습니다.먼저 CSS에 다음 규칙을 추가합니다.

body.waiting * {
    cursor: progress;
}

그런 다음 진행 커서를 켜려면 다음과 같이 말합니다.

$('body').addClass('waiting');

진행 커서를 끄려면 다음과 같이 말합니다.

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

이 방법의 장점은 진행 커서를 끄면 CSS에 정의된 다른 커서가 복원된다는 것입니다.규칙을 할 만큼 가 높지 하거나 CSS "CSS"를 사용할 수 .!important.

2021년에는 jQuery를 사용하지 마십시오!한 줄로 수행할 수 있는 한 가지 작업을 수행하기 위해 전체 외부 라이브러리를 포함할 이유는 없습니다.

합니다.document.body.style.cursor = 'wait'

.document.body.style.cursor = 'default'

jQuery:
$("body").css("cursor", "progress");

로 다시
$("body").css("cursor", "default");

예:
document.body.style.cursor = 'progress';

로 다시
document.body.style.cursor = 'default';

다음은 제가 선호하는 방법이며 페이지가 변경될 때마다 커서를 변경합니다.beforeunload

$(window).on('beforeunload', function(){
   $('*').css("cursor", "progress");
});

jquery 및 CSS 사용:

$("#element").click(function(){ 
    $(this).addClass("wait");
});​

HTML:<div id="element">Click and wait</div>​

CSS:.wait {cursor:wait}​

여기서 데모

$('#some_id').click(function() {
  $("body").css("cursor", "progress");
  $.ajax({
    url: "test.html",
    context: document.body,
    success: function() {
      $("body").css("cursor", "default");
    }
  });
});

그러면 Ajax 호출이 성공할 때까지 로드 커서가 만들어집니다.

모든 단일 요소 재정의

$("*").css("cursor", "progress");

이를 위해 JavaScript가 필요하지 않습니다.CSS를 사용하여 커서를 원하는 대로 변경할 수 있습니다.

selector {
    cursor: url(myimage.jpg), auto;
}

브라우저에 따라 약간의 차이가 있으므로 브라우저 지원은 여기를 참조하십시오.

여기 여러분이 할 수 있는 다른 흥미로운 것이 있습니다.각 Ajax 호출 직전에 호출할 함수를 정의합니다.또한 각 아약스 호출이 완료된 후 호출할 함수를 지정합니다.첫 번째 기능은 대기 커서를 설정하고 두 번째 기능은 커서를 지웁니다.다음과 같이 표시됩니다.

$(document).ajaxComplete(function(event, request, settings) {
    $('*').css('cursor', 'default');
  });

function waitCursor() {
    $('*').css('cursor', 'progress');
  }

저장 속도가 너무 빠르면 다음을 수행합니다.

<style media="screen" type="text/css">
    .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;}
</style>

<input type="button" value="Save" onclick="save();" />&nbsp;
<span class="autosave" style="display: none;">Saved Successfully</span>


$('span.autosave').fadeIn("80");
$('span.autosave').delay("400");
$('span.autosave').fadeOut("80");

커서를 '본문'으로 설정하면 페이지의 배경에 대한 커서가 변경되지만 페이지의 컨트롤에는 변경되지 않습니다.예를 들어 단추 위에 마우스를 올려 놓을 때 단추에는 여전히 일반 커서가 있습니다.다음은 제가 사용하는 것입니다.

'대기' 커서를 설정하려면 스타일 요소를 만들고 헤드에 삽입합니다.

var css = "* { cursor: wait; !important}";
var style = document.createElement("style");
style.type = "text/css";
style.id = "mywaitcursorstyle";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

그런 다음 커서를 복원하려면 스타일 요소를 삭제합니다.

var style = document.getElementById("mywaitcursorstyle");
if (style) {
  style.parentNode.removeChild(style);
}

커서가 스타일을 대기 스타일로 변경하기 전의 스타일로 효과적으로 재설정할 수 있는 유일한 방법은 페이지 시작 부분의 스타일 시트 또는 스타일 태그에서 원래 스타일을 설정하고 해당 개체의 클래스를 스타일 이름으로 설정하는 것입니다.그런 다음 대기 기간 후 커서 스타일을 "기본값"이 아닌 빈 문자열로 다시 설정하면 스타일 태그 또는 스타일 시트에 설정된 원래 값으로 돌아갑니다.대기 기간 후 이를 "기본값"으로 설정하면 모든 요소에 대한 커서 스타일이 포인터인 "기본값" 스타일로만 변경됩니다.이전 값으로 되돌리지 않습니다.

이 작업을 수행하는 데는 두 가지 조건이 있습니다.먼저 스타일 시트 또는 스타일 태그가 있는 페이지의 머리글에서 스타일을 설정해야 합니다. 인라인 스타일이 아니라 두 번째는 대기 스타일을 다시 빈 문자열로 설정하여 스타일을 재설정하는 것입니다.

CSS:

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

클릭 시:

onclick: "myFunction();"  //call your procedure

클릭하기 직전에 커서를 변경하는 방법:

onmousedown="$('html').addClass('wait');"

기능이 종료될 때:

$('html').removeClass('wait');" //back to normal cursor

또는 기능 시작 시 커서 복원 시간을 초과하는 것이 좋습니다. (기능이 종료된 후 50ms 후 커서 복원)

setTimeout(function() { $('html').removeClass('wait') }, 50);

모두 함께:

<div style="cursor: pointer" onmousedown="$('html').addClass('wait');" onclick="sample('DE');">sample</div>

<script>
    function sample(c) {
        //timeout (this waits 50ms after function completed to restore cursor)
        setTimeout(function() { $('html').removeClass('wait') }, 50);
    
        //do your stuff including a calling opening a modal window
        //call ajax etc,
    
    }
</script>

언급URL : https://stackoverflow.com/questions/9681080/changing-cursor-to-waiting-in-javascript-jquery