jQuery - afficher le chargement de l'image seulement si l'appel ajax prend plus d'une seconde?

Est-il possible de montrer le "Chargement.." animation seulement si l'appel ajax prend plus que de dire, une seconde? Certains de mes appels ajax sont assez vite, mais je continue à voir l'icône de chargement pour une fraction de seconde avant qu'il ne disparaisse. Peut-être que c'est juste moi, mais je trouve gênant. Je ne veux pas supprimer complètement si. Toutes les suggestions? Voici mon code -

    $('#loading').hide()
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

<div id="loading">
    <img alt="Loading, please wait.." src="/content/images/spinner.gif" />
</div>
InformationsquelleAutor tempid | 2012-01-31
  1. 33

    Vous devriez mettre votre code dans un minuteur:

    var $loader = $('#loading'), timer;

$loader.hide()
    .ajaxStart(function()
    {
        timer && clearTimeout(timer);
        timer = setTimeout(function()
        {
            $loader.show();
        },
        1000);
    })
    .ajaxStop(function()
    {
        clearTimeout(timer);
        $loader.hide();
    });
    • Merci beaucoup! Il a travaillé comme un charme.
    • J'ai eu la même question, merci de poster cette solution. Je clarifier la syntaxe - var $loader = $("#chargement"), minuterie; est la création de l'objet jquery contenant de la minuterie et le sélecteur id=chargement. minuteur && clearTimeout(timer); pourquoi est-ce écrit comme ça et pas simplement clearTimeout(timer)? J'avais essayé de similaire, mais seulement réussi à retarder le spectacle, par opposition à l'affichage uniquement après x millisecs. Pas encore tout à fait clair comment encapsulant les événements mondiaux réalise ce qu'elle réalise. Pourriez-vous développer?
    • attend un ID de minuterie comme paramètre. La première fois ajaxStart s'exécute, timer ne sera pas défini. En passant undefined clearTimeout ne semble pas être en mesure d'élever les erreurs, je ne l'ai pas testé assez, j'ai donc décidé de plutôt vérifier d'abord si timer a réellement un id. Nore que timer && clearTimeout(timer); est équivalent à if(timer) { clearTimeout(timer); }.
    • ok oui je vois que maintenant. C'est très soignée. Merci.
    InformationsquelleAutor Joseph Silber
  2. 9

    Vous pouvez utiliser un setTimeout().

    var loadingTimeout;
$('#loading').hide()
.ajaxStart(function() {
    var element = $(this);
    loadingTimeout = setTimeout(function() {
       element.show();
    }, 1e3);
})
.ajaxStop(function() {
    clearTimeout(loadingTimeout);
    $(this).hide();
});
    • Cela a fonctionné ainsi. Je vous remercie monsieur.
    • 1) Vous devez capturer element comme argument. 2) Ne pas passer element puisque c'est undefined passe -this. 3) cela ne fonctionne pas dans IE, car il ne vous permet pas de passer des arguments dans ce mode.
    • Je suis dans un mauvais jour, codage... sera corrigé.
    InformationsquelleAutor alex