Thay đổi con trỏ thành chờ trong javascript / jquery

Làm cách nào để con trỏ của tôi thay đổi thành biểu tượng tải này khi một hàm được gọi và làm thế nào để tôi thay đổi nó trở lại thành một con trỏ bình thường trong javascript / jquery

Trong jQuery của bạn sử dụng:

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

và sau đó trở lại bình thường

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

Một đồng nghiệp đã đề xuất một cách tiếp cận mà tôi thấy thích hợp hơn với giải pháp đã chọn ở đây. Đầu tiên, trong CSS, thêm quy tắc này:

body.waiting * {
    cursor: progress;
}

Sau đó, để bật con trỏ tiến trình, hãy nói:

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

và để tắt con trỏ tiến trình, hãy nói:

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

Ưu điểm của phương pháp này là khi bạn tắt con trỏ tiến trình, mọi con trỏ khác có thể đã được xác định trong CSS của bạn sẽ được khôi phục. Nếu quy tắc CSS không đủ mạnh để ưu tiên ghi đè các quy tắc CSS khác, bạn có thể thêm id vào phần thân và quy tắc hoặc sử dụng !important.

Vui lòng không sử dụng jQuery cho việc này trong năm 2018! Không có lý do gì để bao gồm toàn bộ thư viện bên ngoài chỉ để thực hiện một hành động có thể đạt được bằng một dòng:

Thay đổi con trỏ thành spinner: document.body.style.cursor = 'wait';

Hoàn nguyên con trỏ về bình thường: document.body.style.cursor = 'default';

Sau đây là cách ưa thích của tôi và sẽ thay đổi con trỏ mỗi khi trang sắp thay đổi, tức là beforeunload

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

Sử dụng jquery và css:

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

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

CSS: .wait {cursor:wait}​

Demo tại đây

Ghi đè tất cả các phần tử đơn

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

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

Điều này sẽ tạo ra một con trỏ tải cho đến khi cuộc gọi ajax của bạn thành công.

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

quay lại lần nữa
$("body").css("cursor", "default");

Nguyên chất:
document.body.style.cursor = 'progress';

quay lại lần nữa
document.body.style.cursor = 'default';

Bạn không cần JavaScript cho việc này. Bạn có thể thay đổi con trỏ thành bất cứ điều gì bạn muốn bằng CSS:

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

Xem ở đây để được hỗ trợ trình duyệt vì có một số khác biệt tinh tế tùy thuộc vào trình duyệt

Đây là một điều thú vị khác bạn có thể làm. Xác định một hàm để gọi ngay trước mỗi cuộc gọi ajax. Đồng thời gán một chức năng để gọi sau khi mỗi cuộc gọi ajax hoàn tất. Hàm đầu tiên sẽ đặt con trỏ chờ và hàm thứ hai sẽ xóa nó. Chúng trông giống như sau:

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

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

Nếu nó tiết kiệm quá nhanh, hãy thử điều này:

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

Đặt con trỏ cho 'body' sẽ thay đổi con trỏ cho nền của trang nhưng không thay đổi cho các điều khiển trên đó. Ví dụ: các nút sẽ vẫn có con trỏ thông thường khi di chuột qua chúng. Sau đây là những gì tôi đang sử dụng:

Để đặt con trỏ 'chờ', hãy tạo thành phần kiểu và chèn vào đầu:

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);

Sau đó, để khôi phục con trỏ, xóa phần tử kiểu:

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

Tôi thấy rằng cách duy nhất để con trỏ thiết lập lại hiệu quả kiểu của nó trở lại kiểu trước khi thay đổi thành kiểu chờ là đặt kiểu gốc trong biểu định kiểu hoặc trong thẻ kiểu ở đầu trang, đặt lớp của đối tượng trong câu hỏi cho tên của phong cách. Sau khoảng thời gian chờ đợi của bạn, bạn đặt kiểu con trỏ trở lại một chuỗi trống, KHÔNG "mặc định" và nó trở lại giá trị ban đầu như được đặt trong thẻ kiểu hoặc biểu định kiểu của bạn. Đặt nó thành "mặc định" sau khoảng thời gian chờ chỉ thay đổi kiểu con trỏ cho mọi thành phần thành kiểu gọi là "mặc định" là con trỏ. Nó không thay đổi nó trở lại giá trị cũ của nó.

Có hai điều kiện để thực hiện công việc này. Trước tiên, bạn phải đặt kiểu trong một biểu định kiểu hoặc trong tiêu đề của trang bằng các thẻ kiểu, KHÔNG phải là kiểu nội tuyến và thứ hai là đặt lại kiểu của nó bằng cách đặt kiểu chờ trở lại thành một chuỗi trống.