38

.load() からの応答を待っている間に、カーソルをビジー/待機カーソルに変更する方法はありますか?

4

8 に答える 8

73

試す：

jQuery1.8+で動作するように更新されました

$(document).ajaxStart(function() {
    $(document.body).css({'cursor' : 'wait'});
}).ajaxStop(function() {
    $(document.body).css({'cursor' : 'default'});
});

ajaxの開始と終了でカーソルが変化します。これにはが含まれ.load()ます。

ここでさまざまなカーソルスタイルを試してください。

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

于 2012-04-26T03:48:11.757 に答える
8

css プロパティを body タグに追加するだけの解決策は好きではありません。要素に既にカーソルが割り当てられている場合は機能しません。私と同じように、cursor: pointer;すべてのアンカー タグで使用します。だから、私はこの解決策を思いついた：

現在のカーソルを上書きしないように CSS クラスを作成します (後で通常に戻れるようにするため)。

.cursor-wait {
    cursor: wait !important;
}

カーソルを追加および削除する関数を作成する

cursor_wait = function()
{
    // switch to cursor wait for the current element over
    var elements = $(':hover');
    if (elements.length)
    {
        // get the last element which is the one on top
        elements.last().addClass('cursor-wait');
    }
    // use .off() and a unique event name to avoid duplicates
    $('html').
    off('mouseover.cursorwait').
    on('mouseover.cursorwait', function(e)
    {
        // switch to cursor wait for all elements you'll be over
        $(e.target).addClass('cursor-wait');
    });
}

remove_cursor_wait = function()
{
    $('html').off('mouseover.cursorwait'); // remove event handler
    $('.cursor-wait').removeClass('cursor-wait'); // get back to default
}

次に、ajax 関数を作成します (すべての ajax 呼び出しでカーソル待機を使用したくないため、ajaxStart や ajaxStop などのイベントは使用しません)。

get_results = function(){

    cursor_wait();

    $.ajax({
        type: "POST",
        url: "myfile.php",

        data: { var : something },

        success: function(data)
        {
            remove_cursor_wait();
        }
    });
}

jQuery load() にはあまり詳しくありませんが、次のようなものになると思います。

$('button').click(function()
{
    cursor_wait();

    $('#div1').load('test.txt', function(responseTxt, statusTxt, xhr)
    {
        if (statusTxt == "success")
        { remove_cursor_wait(); }
    });
});

デモ

それが役に立てば幸い！

于 2014-10-03T17:10:30.543 に答える
5

あなたはこれを使うことができます：

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

ロードを開始する前に、完了したらカーソルを自動に変更します

于 2012-04-26T03:46:42.530 に答える
1

これがお役に立てば幸いです

$("body").css('cursor','wait');
   //or
   $("body").css('cursor','progress');

あいさつ

于 2012-04-26T03:48:31.310 に答える
1

試す：

$(document).ajaxStart(function () {
    $('body').css('cursor', 'wait');
}).ajaxStop(function () {
    $('body').css('cursor', 'auto');
});

jQuery 1.8 以降、.ajaxStop() および .ajaxComplete() メソッドはドキュメントにのみ添付する必要があります。

.ajaxStop() と .ajaxComplete() を交換すると、両方とも満足のいく結果が得られました。

于 2015-05-14T17:32:49.427 に答える
1

ここや他の場所で見つけたさまざまな方法を試してみたところ、マウスカーソルを変更すると、さまざまなブラウザー (または RDP/VNC/ターミナルユーザーなどのセットアップ) にバグが多すぎることがわかりました。だから代わりに私はこれで終わった：

ドキュメントの準備ができた後に起動するアプリの初期化コード内：

    // Make working follow the mouse
    var working = $('#Working');
    $(document).mousemove(function(e) {
        working.css({
            left: e.pageX + 20,
            top: e.pageY
        });
    });

    // Show working while AJAX requests are in progress
    $(document).ajaxStart(function() {
        working.show();
    }).ajaxStop(function() {
        working.hide();
    });

そして、HTML の終わりに向かって、私が持っている本文のすぐ内側に:

<div id="Working" style="position: absolute; z-index: 5000;"><img src="Images/loading.gif" alt="Working..." /></div>

これは Windows の「アプリの読み込み」マウス カーソルとよく似ており、通常のカーソルが表示されますが、何かが起こっていることもわかります。私のアプリはこれまでのところ (テストの初期段階で) かなりうまく処理されているため、待っている間も他のことを実行できるとユーザーに感じてもらいたいので、これは私の場合には理想的です。

私の loading.gif ファイルは、典型的な糸車で、約 16x16 ピクセルなので、それほど煩わしくはありませんが、明らかです。

于 2013-05-09T04:13:13.763 に答える
0

body の CSS を に変更しcursor: progressます。

これを行うには、この CSS で「待機」クラスを作成し、本体からクラスを追加/削除します。

CSS:

.waiting {
    cursor: progress;
}

次に、JSで：

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

で後で削除できます.removeClass。

于 2012-04-26T03:45:38.543 に答える