web-dev-qa-db-fra.com

jquery wait curseur lors du chargement de HTML dans div

Je veux montrer à l'utilisateur un état que le résultat est en train de charger. Comment changer le curseur ou le gif pendant le chargement donne un résultat div avec $ MyDiv.load ("page.php")?

javascriptjqueryhtmldom
17
Bigballs
  1. Initialement, l’image de chargement n’est pas visible. 
  2. Modifiez le style en visible lorsque vous commencez à charger.
  3. Changez le style en non visible lorsque le chargement est terminé en utilisant un argument de rappel pour load ().

Exemple:

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

Rappelez-vous juste de le retourner après:

$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") fonctionnera peu importe où sur la page que vous pointez actuellement. De cette façon, vous ne devez pas déplacer le curseur pour le voir activé.

12
mountain

Je pense que le mieux est de mettre en place un fichier css

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

et ajouter/supprimer la classe d'attente dans le corps

cette méthode remplace tous les curseurs dans les entrées, les liens, etc.

10
Marmot

Je pense vraiment que la meilleure solution consiste à utiliser simplement une classe dans l'élément body

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

Et quand vous voulez le garder comme avant, juste:

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

et dans votre fichier css mettez quelque chose comme ça:

body.cursorProgress {
  cursor: progress;
}

Ainsi, avec cette solution, vous ne modifiez pas les valeurs par défaut ou les modifications que vous apportez aux styles de curseur. Le deuxième avantage est que vous avez la possibilité d’ajouter l’important dans votre css.

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

Par exemple, si vous souhaitez afficher une image plus grande en survolant une vignette 

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

Regardez ma solution, elle couvre tous les éléments, pas seulement la balise body: https://stackoverflow.com/a/26183551/1895428

0
pmrotule

Une approche JQuery plus propre, bien que pas nécessairement efficace, consiste à ajouter et supprimer une classe occupée à tous les objets.

Notez que tous les navigateurs (Firefox, par exemple) ne supposent pas une hauteur de 100% pour l'objet visible le plus à l'extérieur. Par conséquent, le curseur occupé ne s'affichera que sur la partie de l'écran.

<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