web-dev-qa-db-ja.com

divにhtmlをロードするときにjquery待機カーソル

結果を読み込んでいる状態をユーザーに表示したい。 $ MyDiv.load（ "page.php"）を使用して結果をdivにロードしているときに、カーソルまたはgifをどのように変更できますか？

javascriptjqueryhtmldom
17
Bigballs
  1. 最初に読み込み画像のスタイルを非表示にします。
  2. ロードを開始したら、スタイルを可視に変更します。
  3. Load（）へのコールバック引数を使用してロードが終了したら、スタイルを非表示に変更します。

例：

 $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });
7
Craig Stuntz
$("body").css("cursor", "progress");

後で忘れずに返してください。

$MyDiv.load("page.php", function () {
    // this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});
62
Magnar

$("*").css("cursor", "progress")は、現在ページのどこを指していても機能します。このようにして、カーソルがアクティブになるのを確認するためにカーソルを移動する必要はありません。

12
mountain

私はCSSファイルで設定するのが最善だと思います

body.wait *, body.wait {
cursor:wait !important;
}

ボディでクラス待機を追加/削除します

このメソッドは、入力、リンクなどのすべてのカーソルをオーバーライドします。

10
Marmot

Body要素でクラスを使用する方が良い解決策だと私は本当に思っています

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

そして、あなたがそれを以前と同じように保ちたいとき：

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

そしてあなたのCSSファイルにそのようなものを入れてください：

body.cursorProgress {
  cursor: progress;
}

したがって、このソリューションでは、カーソルスタイルに加えたデフォルトや変更を上書きすることはありません。2番目の利点は、CSSに重要な要素を追加できる可能性があることです。

body.cursorProgress {
  cursor: progress !important;
}
4
robertovg

たとえば、サムネイルの上にホバーすると大きな画像を表示したい場合

//Hovered image
    $("a.preview").hover(function(e) {
            var aprev = this;
            //Show progress cursor while loading image
            $(aprev).css("cursor", "progress");
    //#imgpreview is the <div> to be loaded on hover
    $("#imgpreview").load(function() {           
                $(aprev).css("cursor", "default");
            });
    }
0
Null Head

私のソリューションを見てください、それはボディタグだけでなくすべての要素をカバーしています： https://stackoverflow.com/a/26183551/1895428

0
pmrotule

すべてのオブジェクトに対してビジークラスを追加および削除することは必ずしも効率的ではありませんが、よりクリーンなJQueryアプローチです。

すべてのブラウザ（Firefoxなど）では、最も外側の表示可能なオブジェクトの高さが100％であるとは限らないため、ビジーカーソルは画面の一部にのみ表示されます。

<head runat="server">
    <title></title>
    <style type="text/css">
        .busy
        {
            cursor: wait !important;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[

        $(function () {

            $("#btnToggleWait").click(function (e) {
                if ($(e.target).hasClass("busy")) {
                    $("*").removeClass("busy");
                }
                else {
                    $("*").addClass("busy");
                }

                e.preventDefault();
                e.stopPropagation();
                return false;
            });
        });

        //]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button id="btnToggleWait">
            Toggle Wait</button>
    </div>
    </form>
</body>
0
pixelda