Quelle est la meilleure façon de mettre un retard sur la projection d'un gif Ajax-loader. Lorsque je clique sur un bouton, le chargeur GIF montre et se cache même si le temps pris est de quelques centaines de milli-secondes, cela donne au navigateur une sorte de scintillement. Ce que je veux dire, c'est seulement montrer le gif si cela prend plus que dire 1000 milli-secondes pour compléter la demande Ajax. mon chargeur div contient .... Quelle est la meilleure technique pour y parvenir?
4 Réponses :
Voici une façon amusante de le faire. Remplacer et votre commande masquer avec ceci: p> $ loader.show () code> avec ceci: window.clearTimeout($("#loader").hide().data('timeout'));
@Dcneiner, rapide Q - Qu'est-ce que 'Timeout'?
Juste un attribut de données personnalisé pour conserver le int renvoyé de Settimeout associé à notre objet DOM. C'est soit cela ou déclarer une autre variable comme @Jitter. Je voulais juste montrer une façon contenue de le faire avec JQuery.
@Ragez ClearTimeout ne fonctionne que lorsque vous avez passé le même entier renvoyé à partir de la fonction Settimeout . Puisque je stocke le entier dans une attribut personnalisé , cela fonctionnerait bien.
Doh! Oublié la longueur du délai d'attente ... Mise à jour de ma réponse :)
Merci Man :) Au moins, vous penserez éventuellement à l'aide de la fonctionnalité dans le futur. Bonne chance pour votre projet!
@Doug, bonne idée en utilisant des données! +1 à coup sûr. J'aime ne pas avoir une variable horlogère globale. Merci d'avoir affiché ça.
Comme vous pouvez le constater, j'ai ajouté un délai d'attente qui retarde pour 300MS. Si Ajax est plus rapide, le délai d'attente est annulé avant que le chargeur ne soit réellement 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>
LOL ... c'est ce que je reçois pour être non conventionnel. Bonne réponse @ Jitter
pensais que je partagerais quelque chose que j'ai fait pour cela. J'ai eu une situation où je devais faire plus que simplement montrer ou cacher l'élément unique. Donc, j'ai utilisé pour créer des événements personnalisés pour le chargeur:
Vous pouvez aussi le faire comme ça.