retarder la diffusion d'un ajax chargement gif à l'aide de jQuery

Quelle est la meilleure façon de mettre un délai sur la présentation d'un ajax-loader gif. Lorsque je clique sur un bouton, le chargeur de gif montre et se cache même si le temps est à quelques centaines de milli-secondes, ce qui donne au navigateur une sorte de tremblement. Ce que je veux, c'est-à-dire montrer le gif si cela prend plus de dire 1000 milli-secondes pour terminer la requête ajax.

 <script type="text/javascript">
     $(document).ready(function() {
         $('#loader').hide();
         $('#btnGetPeople').click(function() {
            $('#loader').show();
             $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
         });
     });

     function showPerson(data) {
         alert(data);
         $('#loader').hide();
     }
</script>

Mon chargeur div contient....

<div id="loader"><img alt="" src="/content/ajax-loader.gif" /></div>

Quelle est la meilleure technique pour y parvenir?

OriginalL'auteur Rippo | 2009-12-05

  1. 22

    Comme vous pouvez le voir, j'ai ajouté un délai de retard montrant 300ms. Si l'ajax est plus rapide que le délai est annulé avant que le chargeur est vraiment montré.

    <script type="text/javascript">
    var showLoader;
    $(document).ready(function() {
        $('#loader').hide();
        $('#btnGetPeople').click(function() {
            //only show loader if ajax request lasts longer then 300 ms
            showLoader = setTimeout("$('#loader').show()", 300);
            $.getJSON("/User/GetName/10",
                null,
                function(data) { showPerson(data); });
        });
    });

    function showPerson(data) {
        clearTimeout(showLoader);
        alert(data);
        $('#loader').hide();
    }
</script>
    Parfait, merci beaucoup....
    LOL... c'est ce que je peux avoir pour être non conventionnel. Bonne réponse @gigue
    jQuery est tellement cool!

    OriginalL'auteur jitter

  2. 5

    Voici une façon amusante de le faire. Remplacer $loader.show():

    $("#loader").data('timeout', window.setTimeout(function(){ $("#loader").show()}, 1000));

    Et votre commande masquer cette:

    window.clearTimeout($("#loader").hide().data('timeout'));
    rapide q - qu'est-ce que 'timeout'?
    Juste une coutume data attribut de garder le int retourné à partir de setTimeout liés à notre objet DOM. Il est ceci ou déclarer une variable comme @gigue. Je voulais juste montrer un moyen de le faire avec jQuery.
    ne fonctionne que lorsque le passé de la même integer renvoyé à partir de la setTimeout fonction. Depuis que je suis le stockage de la integer personnalisé dans un data attribut, ça marcherait bien.
    Doh! Oublié la durée du délai d'attente... la mise à jour de ma réponse 🙂
    +1 pour moi, merci quand même

    OriginalL'auteur Doug Neiner

  3. 1

    Vous pouvez aussi faire comme cela. 

    var loadingTimer;

$(document).ready(function () {

    $("#loader").ajaxStart(function () {
        loadingTimer = setTimeout(function () {
            $("#loader").show();
        }, 200);
    });

    $("#loader").ajaxStop(function () {
        clearTimeout(loadingTimer);
        $(this).hide();
    });

}

    OriginalL'auteur user1638397

  4. 0

    Pensais que je voudrais partager quelque chose que j'ai fait pour cela. J'ai eu une situation où j'avais besoin de faire plus que simplement afficher ou masquer un élément. J'ai donc utilisé lier à créer des événements personnalisés pour le chargeur:

    $("#loader").bind("delayshow", function (event, timeout) {
    var $self = $(this);
    $self.data('timeout', setTimeout(function () {
        //show the loader
        $self.show();
        /* 
            implement additional code here as needed
        */
    }, timeout));
}).bind("delayhide", function (event) {
    //close and clear timeout
    var $self = $(this);
    clearTimeout($self.hide().data('timeout')); 
    /*
        implement additional code here as needed 
    */
});

//show it with a 500 millisecond delay
$("#loader").trigger('delayshow', 500);

//hide it
$("#loader").trigger('delayhide');

    OriginalL'auteur fehays