Forum : Systeme de loader, comment connaitre le temps de chargement

Salut à tous,

J'ai installé un systeme de loader en jquery (j'utilise jquery surtout pour faire de l'ajax car je trouve l'objet XMLHttpRequest de javascript pur vraiment pas pratique) pour patienter pendant que mon script récupere des donnees MYSQL avec ajax. Tout fonctionne bien, le probleme c'est qu'évidemment lorsqu'il n'y pas bcp de traffic et que les requetes s'éxécutent rapidement on a à peine le temps de voir le loader que la page est déja chargé, du coup le résultat n'est pas très esthétique et ne fait pas très pro.
J'aimerais donc savoir s'il existe un moyen de connaitre le temps de chargement de la page pour n'afficher le loader que si celui ci atteint un certain temps (par exemple 2s). Je ne sais pas si c'est tres clair mais ca reviendrait limite à faire un setTimeOut coté JS ou alors un sleep() coté php (chose que je fais justmenet en local pour tester mon loader) sauf que bien sur je ne veux pas faire ca vu que je n'ai pas envi de volontairement ralentir la vitesse d'éxéctution de mes scripts. S'il n'y a pas de traffic et que la navigation est fluide, et bah tant mieux, je n'affiche juste pas de loader et la page s'affiche directement.
Je ne sais pas si j'ai été tres clair mais si vous avez des questions pour que je détaille plus ma pensée n'hésitez pas .

// Boucle pour placer un event click sur chaque plat proposé for (var i=0; i<platSelect.length; i++) { platSelect[i].addEventListener("click",function(e) { platChoisi = this.id; ga('send', 'event', platChoisi, 'click'); // Affichage de la div car quand on click sur un plat il y a un systeme de scroll auto qui amene le client jusqu'a cette div // Cachage du contenu car celui ci ne contient pas encore les données, seulement les titres (exemple "prix: " "ingrédients: " etc..) divSection.style.display="block"; $(".content").hide(); $(".loader").fadeIn(); // Récupération des données en Json $.getJSON('ajax/ajax.php?html_id='+platChoisi,function (donnees) { // Ecriture dans le code html divNom.innerHTML=donnees.nom; divMacro.innerHTML=donnees.calorie+" kcal / "+donnees.proteine+"g Protéine/ "+donnees.glucide+"g Glucide/ "+donnees.lipide+"g Lipide"; divCompo.innerHTML=donnees.composition; divPrix.innerHTML=donnees.prix+"€"; divConseils.innerHTML=donnees.conseils; divImage.src="images/"+donnees.image; $(".item_htmlid").html(donnees.html_id); if (donnees.supplement_prot=="true") { divProtein.style.display="inline-block"; } else { divProtein.style.display="none"; } }) // La requete est terminé toutes les données sont transmises, je cache le loader et affiche le contenu de la div .done(function(){ $(".loader").hide(); $(".content").fadeIn(); }); },false); } })();

Merci d'avance pour votre aide.

Systeme de loader, comment connaitre le temps de chargement

1 réponse