Javascript Girl
  1. Javascript Girl
  3. Afficheur AJAX Loader on page load
Intereting Posts
Obtenir la valeur de la variable javascript dans l'étiquette de modèle Django url <Video> et onloadedmetadata-event Passer une valeur de PHP à JavaScript KnockoutValidation et la règle conditionnelle requise Knockout.js input box event change – passe une ancienne valeur Comment puis-je construire une chaîne de modèle à partir d'une chaîne régulière? Réagissez: Comment puis-je mettre à jour state.item sur setState? (Avec JSFiddle) Compression javascript string avec localStorage Modifier la disposition du clavier avec javascript Détecter l'URL d'appel Ajax Laisser var ou var laisser Impossible d'obtenir un «trait de soulignement» pour fonctionner avec le serveur d'analyse Imprimer des tags html en javascript La fonction DOM fonctionne dans la console mais pas en extension, malgré l'attente d'une charge AlignItems: centre empêche l'envoi de texte de la ligne flexible dans React Native

Afficheur AJAX Loader on page load

Bonjour, je suis assez nouveau à javascript et je ne sais pas comment l'utiliser.

Je veux que le chargeur AJAX apparaisse lorsqu'une page se charge et que, après le chargement, j'ai fini de vouloir que le chargeur disparaisse. Quelqu'un peut-il me poster un code pour cela?

Généralement, cela se fait en montrant / cachant un div ou deux au dessus de votre contenu. Vous pouvez obtenir un gif de chargement chic de http://www.ajaxload.info/ pour vous aider à démarrer. Ensuite, vous voudrez placer un DIV sur votre page: 

<div id="loading"> <p><img src="loading.gif" /> Please Wait</p> </div>

Vous voudrez que cela soit caché par défaut, donc vous devriez ajouter ce CSS: 

 #loading { display:none; }

Vous souhaitez également configurer l'affichage pour cela: 

 #loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-image:url("transparentbg.png"); }

Le fichier transparentbg.png serait un PNG noir 25×25 réglé à environ 80% opaque. Ensuite, vous auriez besoin d'un moyen de montrer et de cacher cela avec jQuery: 

 function showLoading() { $("#loading").show(); } function hideLoading() { $("#loading").hide(); }

Maintenant, vous pouvez l'utiliser lorsque vous devez faire quelque chose comme une requête d'une page externe pour les données: 

 showLoading(); $.post("data.php", {var:"foo"}, function(results){ $("content").append(results); hideLoading(); });

Vous pouvez afficher une image, par exemple, dès que vous avez lancé l'appel Ajax et ensuite cacher l'image lorsque vous recevez la réponse de l'appel ajax.

Html: 

 <div style="display:none" id="dvloader"><img src="loading.gif" /></div>

Javascript: 

 $(function() { $(".changepass").click(function() { $("#dvloader").show(); $(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); }); return false; }); });

https://preloaders.net/fr/ajax_loader_script ici vous pouvez trouver la description complète avec les animations du chargeur en format GIF, SVG et même APNG