javascript / jquery에서 커서를 대기로 변경

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

jQuery에서 다음을 사용하십시오.

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

다시 정상으로 돌아갑니다

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

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

body.waiting * {
    cursor: progress;
}

그런 다음 진행률 커서를 켜려면 다음과 같이 말하십시오.

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

진행률 커서를 끄려면 다음과 같이 말하십시오.

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

이 접근 방식의 장점은 진행률 커서를 끄면 CSS에 정의 된 다른 커서가 복원된다는 것입니다. CSS 규칙이 다른 CSS 규칙을 무시할만큼 우선적으로 강력하지 않은 경우 본문 및 규칙에 ID를 추가하거나 !important.

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

커서를 스피너로 변경 : document.body.style.cursor = 'wait';

커서를 정상으로 되돌리기 : 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}​

여기에서 데모

모든 단일 요소 무시

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

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

이것은 ajax 호출이 성공할 때까지 로딩 커서를 생성합니다.

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

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

순수한:
document.body.style.cursor = 'progress';

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

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

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

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

당신이 할 수있는 또 다른 흥미로운 일이 있습니다. 각 ajax 호출 직전에 호출 할 함수를 정의하십시오. 또한 각 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);
}

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

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