การเปลี่ยนเคอร์เซอร์เป็นการรอใน javascript / jquery

ฉันจะเปลี่ยนเคอร์เซอร์เป็นไอคอนโหลดนี้ได้อย่างไรเมื่อมีการเรียกใช้ฟังก์ชันและฉันจะเปลี่ยนกลับเป็นเคอร์เซอร์ปกติใน javascript / 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ที่คุณสามารถเพิ่มรหัสให้กับร่างกายและการปกครองหรือการใช้งาน

โปรดอย่าใช้ jQuery ในปี 2018 นี้! ไม่มีเหตุผลที่จะรวมไลบรารีภายนอกทั้งหมดเพียงเพื่อดำเนินการสิ่งนี้ซึ่งสามารถทำได้ด้วยบรรทัดเดียว:

เปลี่ยนเคอร์เซอร์เป็นสปินเนอร์: 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;
}

ดูที่นี่สำหรับการรองรับเบราว์เซอร์เนื่องจากมีความแตกต่างเล็กน้อยขึ้นอยู่กับเบราว์เซอร์

นี่คือสิ่งที่น่าสนใจอื่น ๆ ที่คุณสามารถทำได้ กำหนดฟังก์ชันในการโทรก่อนการโทรแต่ละครั้ง กำหนดฟังก์ชันการโทรหลังจากการโทรแต่ละครั้งเสร็จสมบูรณ์ ฟังก์ชันแรกจะตั้งค่าเคอร์เซอร์รอและฟังก์ชันที่สองจะล้างออก มีลักษณะดังต่อไปนี้:

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

การตั้งค่าเคอร์เซอร์สำหรับ "body" จะเปลี่ยนเคอร์เซอร์สำหรับพื้นหลังของหน้า แต่ไม่ใช่สำหรับการควบคุมบน ตัวอย่างเช่นปุ่มต่างๆจะยังคงมีเคอร์เซอร์ปกติเมื่อวางเมาส์เหนือปุ่มเหล่านั้น ต่อไปนี้คือสิ่งที่ฉันใช้:

ในการตั้งค่าเคอร์เซอร์ "รอ" ให้สร้างองค์ประกอบลักษณะและแทรกในส่วนหัว:

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

ฉันพบว่าวิธีเดียวที่จะทำให้เคอร์เซอร์รีเซ็ตรูปแบบกลับไปเป็นแบบเดิมได้อย่างมีประสิทธิภาพก่อนที่จะเปลี่ยนเป็นสไตล์การรอคือการตั้งค่าสไตล์ดั้งเดิมในสไตล์ชีตหรือในแท็กสไตล์ที่จุดเริ่มต้นของหน้าตั้งค่า คลาสของออบเจ็กต์ที่เป็นปัญหากับชื่อของสไตล์ หลังจากช่วงเวลารอคุณตั้งค่ารูปแบบเคอร์เซอร์กลับเป็นสตริงว่างเปล่าไม่ใช่ "ค่าเริ่มต้น" และจะเปลี่ยนกลับเป็นค่าเดิมตามที่ตั้งค่าไว้ในแท็กสไตล์หรือสไตล์ชีตของคุณ การตั้งค่าเป็น "ค่าเริ่มต้น" หลังจากช่วงเวลารอจะเปลี่ยนรูปแบบเคอร์เซอร์ของทุกองค์ประกอบให้เป็นสไตล์ที่เรียกว่า "ค่าเริ่มต้น" ซึ่งเป็นตัวชี้ จะไม่เปลี่ยนกลับไปเป็นค่าเดิม

มีสองเงื่อนไขที่จะทำให้งานนี้ ก่อนอื่นคุณต้องตั้งค่าสไตล์ในสไตล์ชีตหรือในส่วนหัวของเพจด้วยแท็กสไตล์ไม่ใช่สไตล์อินไลน์และอย่างที่สองคือการรีเซ็ตสไตล์โดยตั้งค่าสไตล์การรอกลับเป็นสตริงว่าง