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ルールを無効にするほど強力でない場合は、本文とルールにIDを追加するか、を使用できます!important。

2018年は、jQueryを使用しないでください。1行で実行できるこの1つのアクションを実行するためだけに外部ライブラリ全体を含める理由はありません。

カーソルをスピナーに変更します。 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呼び出しが完了した後に呼び出す関数を割り当てます。最初の関数は待機カーソルを設定し、2番目の関数はそれをクリアします。それらは次のようになります。

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

次に、カーソルを復元するには、style要素を削除します。

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

待機スタイルに変更される前の状態にカーソルを効果的にリセットする唯一の方法は、ページの最初にあるスタイルシートまたはスタイルタグに元のスタイルを設定することでした。問題のオブジェクトのクラスとスタイルの名前。次に、待機時間の後、カーソルスタイルを「デフォルト」ではなく空の文字列に戻し、スタイルタグまたはスタイルシートで設定された元の値に戻します。待機期間の後で「デフォルト」に設定すると、すべての要素のカーソルスタイルが、ポインタである「デフォルト」と呼ばれるスタイルに変更されるだけです。元の値に戻すことはありません。

これを機能させるには2つの条件があります。最初に、インラインスタイルとしてではなく、スタイルシートまたはスタイルタグを使用してページのヘッダーにスタイルを設定する必要があります。次に、待機スタイルを空の文字列に設定してスタイルをリセットします。