jquery curseur d'attente lors du chargement de html dans div

Je veux montrer à l'utilisateur un état que le résultat chargement.
Comment puis-je modifier le curseur ou gif pendant le chargement de résultat dans des div avec $MyDiv.load("page.php") ?

InformationsquelleAutor Bigballs | 2009-02-18
  1. 7
    1. Initialement style le chargement de l'image non-visible.
    2. Changer le style de visible lorsque vous commencer à charger.
    3. Changer le style de la non-visible lors du chargement terminé à l'aide d'un rappel de l'argument à la méthode load().

    Exemple:

     $("#loadImage").show();
 $("#MyDiv").load("page.php", {limit: 25}, function(){
   $("#loadImage").hide();
 });
    • Pour créer le chargement gif, découvrez ajaxload.info vous pouvez personnaliser l'un et de l'enregistrer.
    InformationsquelleAutor Craig Stuntz
  2. 62
    $("body").css("cursor", "progress");

    N'oubliez pas de le retourner par la suite:

    $MyDiv.load("page.php", function () {
    //this is the callback function, called after the load is finished.
    $("body").css("cursor", "auto");
});
    • cela ne fonctionne pas sur mon site, mais $("*").css("curseur", "progrès") n'
    • hmm... cette approche a un mauvais effet de côté... paramètre $('*').css('curseur', 'auto') efface toute spéciale curseurs vous mai ont mis en place sur les éléments sur la page. pas bon!
    • Connaissez-vous une alternative?
    • Tant pis, je l'ai résolu en définissant une classe css loading où j'ai mis le curseur. Et au lieu de $fnord.css(...) j'utilise $fnord.toggleClass ("chargement")
    • Cela fonctionne pour moi, sauf si j'ai passez la souris sur un bouton. Est-il un moyen en CSS pour définir !- il important?
    • lors du retour à la normale, j'ai utilisé $("body").css("cursor", "");

    InformationsquelleAutor Magnar
  3. 12

    $("*").css("cursor", "progress") fonctionnera n'importe où sur la page en cours de pointage. De cette façon, vous n'avez pas à déplacer le curseur pour voir qu'il a activé.

    InformationsquelleAutor mountain
  4. 10

    Je pense que le mieux est de le placer dans le fichier css

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

    et ajout/suppression de classe attendre dans le corps

    cette méthode remplace tous les curseurs en intrants, des liens etc.

    • J'aime l'approche mais il ne fonctionne pas sur IE 9. la montagne a l'approche de $('*').css('cursor', ...) fait bien
    • oups! cette approche est erronée. il efface curseur affectations de tout sur la page
    • C'est en fait le meilleur de la croix-navigateur de la solution testée. après le retrait d'attente de la classe, CSS cascade de nouveau à ce que le curseur a été définie sans défaut comme les autres solutions. Merci Marmotte. @ekkis vous devriez tester à nouveau. il travaille dans IE9.
    InformationsquelleAutor Marmot
  5. 4

    Je pense vraiment que c'est une meilleure solution d'utiliser une classe dans le corps de l'élément de

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

    Et quand vous voulez la garder comme elle était avant tout:

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

    et dans vous fichier css mettre quelque chose comme ça:

    body.cursorProgress {
  cursor: progress;
}

    Donc, avec cette solution, vous n'êtes pas en substituant les valeurs par défaut ou les modifications que vous apportez sur le curseur de styles, et le deuxième avantage est que vous avez la possibilité d'ajouter l'important dans votre css.

    body.cursorProgress {
  cursor: progress !important;
}
    InformationsquelleAutor robertovg
  6. 0

    Par exemple, si vous souhaitez afficher une image plus grande sur planant sur 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");
            });
    }
    InformationsquelleAutor Null Head
  7. 0

    Un nettoyeur de JQuery approche, bien que pas nécessairement efficace est d'ajouter et de supprimer un chargé de classe de tous les objets.

    Notez que, tous les navigateurs (par exemple Firefox) supposent une hauteur de 100% pour le ultrapériphériques visible de l'objet, alors le occupé le curseur ne s'affiche 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>
    InformationsquelleAutor pixelda
  8. 0

    Ont un coup d'oeil à ma solution, il couvre tous les éléments, non seulement la balise body:
    https://stackoverflow.com/a/26183551/1895428

    InformationsquelleAutor pmrotule