webentwicklung-frage-antwort-db.com.de

jquery wait Cursor während des Ladens von HTML in div

Ich möchte dem Benutzer einen Status anzeigen, dass das Ergebnis geladen wird. Wie kann ich den Cursor oder das Gif während des Ladens des Ergebnisses in div mit $ MyDiv.load ("page.php") ändern?

javascriptjqueryhtmldom
17
Bigballs
  1. Zunächst formatieren Sie das Ladebild nicht sichtbar. 
  2. Ändern Sie den Stil in sichtbar, wenn Sie mit dem Laden beginnen.
  3. Ändern Sie den Stil in nicht sichtbar, wenn das Laden mit einem Rückrufargument für load () abgeschlossen ist.

Beispiel:

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

Denken Sie daran, es nachher zurückzugeben:

$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") funktioniert unabhängig davon, wo auf der Seite Sie gerade zeigen. Auf diese Weise müssen Sie den Cursor nicht bewegen, um ihn aktiviert zu sehen.

12
mountain

Ich denke, das Beste ist, es in CSS-Datei einzurichten

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

und füge Klasse Klassenwarte hinzu bzw. entferne sie

diese Methode überschreibt alle Cursor in Eingaben, Links usw.

10
Marmot

Ich denke wirklich, dass es eine bessere Lösung ist, einfach eine Klasse im body-Element zu verwenden

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

Und wenn Sie es so behalten wollen, wie es vorher war, einfach:

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

und in deine css-Datei steckte so etwas:

body.cursorProgress {
  cursor: progress;
}

Mit dieser Lösung überschreiben Sie also nicht die Standardeinstellungen oder Änderungen, die Sie an Cursor-Stilen vornehmen, und der zweite Vorteil besteht darin, dass Sie die Möglichkeit haben, das Wichtige in Ihre CSS einzutragen.

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

Zum Beispiel, wenn Sie ein größeres Bild anzeigen möchten, wenn Sie sich in einer Miniaturansicht befinden 

//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

Schauen Sie sich meine Lösung an, sie deckt alle Elemente ab, nicht nur den Body-Tag: https://stackoverflow.com/a/26183551/1895428

0
pmrotule

Eine saubere JQuery-Methode, die jedoch nicht unbedingt effizient ist, besteht darin, allen Objekten eine aktive Klasse hinzuzufügen und zu entfernen.

Beachten Sie, dass nicht alle Browser (z. B. Firefox) für das äußerste sichtbare Objekt eine Höhe von 100% annehmen, so dass der besetzte Cursor nur auf dem Bildschirmbereich angezeigt wird

<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