İmleci javascript / jquery'de bekleme olarak değiştirme

Bir işlev çağrıldığında imlecimin bu yükleme simgesine nasıl değişmesini sağlayabilirim ve javascript / jquery'de onu normal bir imlece nasıl değiştirebilirim

JQuery kullanımınızda:

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

ve sonra tekrar normale döner

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

Bir meslektaşım, burada seçilen çözüme göre tercih edilebilir bulduğum bir yaklaşım önerdi. Öncelikle, CSS'de şu kuralı ekleyin:

body.waiting * {
    cursor: progress;
}

Ardından, ilerleme imlecini açmak için şunu söyleyin:

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

ve ilerleme imlecini kapatmak için şunu söyleyin:

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

Bu yaklaşımın avantajı, ilerleme imlecini kapattığınızda, CSS'nizde tanımlanmış olabilecek diğer imleçler geri yüklenecektir. CSS kuralı diğer CSS kurallarını geçersiz kılacak kadar önceliğe sahip değilse, gövdeye ve kurala bir kimlik ekleyebilir veya kullanabilirsiniz !important.

Lütfen bunun için 2018'de jQuery kullanmayın! Yalnızca tek satırla gerçekleştirilebilecek bu eylemi gerçekleştirmek için tüm bir dış kitaplığı dahil etmenin bir nedeni yoktur:

İmleci dönen olarak değiştirin: document.body.style.cursor = 'wait';

İmleci normale döndür: document.body.style.cursor = 'default';

Aşağıdakiler benim tercih ettiğim yoldur ve bir sayfa her değişmek üzereyken imleci değiştirecektir. beforeunload

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

Jquery ve css kullanarak:

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

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

CSS: .wait {cursor:wait}​

Demo burada

Tüm tek öğeleri geçersiz kıl

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

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

Bu, ajax çağrınız başarılı olana kadar bir yükleme imleci oluşturacaktır.

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

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

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

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

Bunun için JavaScript'e ihtiyacınız yok. İmleci CSS kullanarak istediğiniz herhangi bir şeye değiştirebilirsiniz:

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

Tarayıcıya bağlı olarak bazı küçük farklılıklar olduğundan tarayıcı desteği için buraya bakın

İşte yapabileceğiniz başka ilginç bir şey. Her ajax çağrısından hemen önce çağrılacak bir işlev tanımlayın. Ayrıca, her ajax çağrısı tamamlandıktan sonra çağrılacak bir işlev atayın. İlk işlev bekleme imlecini ayarlayacak ve ikincisi onu temizleyecektir. Aşağıdakine benziyorlar:

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

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

Çok hızlı kaydederse, şunu deneyin:

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

İmleci 'gövde' olarak ayarlamak, imleci sayfanın arka planı için değiştirir ancak üzerindeki kontroller için değiştirmez. Örneğin, düğmelerin üzerine gelindiğinde normal imleç yine de olacaktır. Aşağıdakiler kullanıyorum:

'Bekle' imlecini ayarlamak için, bir stil öğesi oluşturun ve başlığa ekleyin:

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

Ardından imleci geri yüklemek için stil öğesini silin:

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

İmlecin stilini bekleme stiline değiştirilmeden önceki haline etkili bir şekilde sıfırlamasının tek yolunun, orijinal stili bir stil sayfasında veya sayfanın başlangıcındaki stil etiketlerinde ayarlamak olduğunu buldum. söz konusu nesnenin sınıfı stilin adına. Sonra bekleme sürenizden sonra, imleç stilini "varsayılan" DEĞİL, boş bir dizeye ayarlarsınız ve stil etiketlerinizde veya stil sayfanızda ayarlandığı şekliyle orijinal değerine geri döner. Bekleme süresinden sonra "varsayılan" olarak ayarlamak, yalnızca her öğe için imleç stilini bir işaretçi olan "varsayılan" olarak adlandırılan stile değiştirir. Onu eski değerine geri döndürmez.

Bunun işe yaraması için iki koşul var. İlk önce stili bir satır içi stil olarak DEĞİL, stil etiketleriyle birlikte bir stil sayfasında veya sayfanın başlığında ayarlamalısınız ve ikincisi bekleme stilini boş bir dizeye ayarlayarak stilini sıfırlamaktır.