Effet de spectacle:
1) Lorsque vous cliquez sur la charge, la simulation effectue un chargement asynchrone. Le navigateur est bloqué. La barre de progression apparaît.
Idées de mise en œuvre:
1. Lorsque l'utilisateur clique sur le bouton de chargement pour exécuter une demande asynchrone. La barre de charge apparaît lorsque la méthode est appelée.
2. Comment mettre en œuvre la barre de progression?
1) Ajoutez un nouveau div à document.body. Écraser le navigateur. L'arrière-plan sera grisé. Z-index = 999. L'utilisateur ne peut pas modifier la valeur d'interface lors du chargement.
2) Ajoutez un div dynamique à document.body.
Implémentation du code:
Main.html:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> </ title> <script src = "Loading.js" charset = "utf-8"> </ script> <lin onClick = "showloading ()"> charger </fontificateur> </ body> </html>
Chargement.js:
fonction showloading () {var overdiv = document.CreateElement ("div"); var chargeingDiv = document.CreateElement ("div"); var childdiv1 = document.CreateElement ("div"); var childdiv2 = document.CreateElement ("divi"); var childdiv3 = document.createElement("div");overDiv.classList.add('over');loadingDiv.classList.add('spinner');childDiv1.classList.add('bounce1')childDiv2.classList.add('bounce2')childDiv3.classList.add('bounce3')loadingDiv.appendChild(childDiv1);lo AdingDiv.ApendChild (Childdiv2); ChargeingDiv.ApendChild (ChildDiv3); Document.Body.ApendChild (Overdiv); Document.Body.ApendChild (LoadingDiv) setTimeout (function () {document.body.removechild (overdiv); document.body.removechild (chargingdiv)}, 5000);}Chargement.css
.spinner {width: 150px;text-align: center;left: 50%;top: 50%;position: absolute;z-index: 1000;}.over {width: 100%;height: 100%;z-index: 998;background-color: gray;position:absolute;top: 0px;left: 0px;opacity: 0.2;}.spinner > div {width: 30px;height: 30px; fond-couleur: # 67CF22; Border-Radius: 100%; Affichage: Block en ligne; -webkit-animation: rebondelay 1.4S Infinite Facit-in-out; Animation: rebondelay 1.4S Infinite Factive-in-out; / * First Frame à partir de l'animation: Animation démarre * / - Webkit-Animation-Fill-Mode: les deux; les deux;}. Spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}. Spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s;} @-webkit-keyframes bontames Bontedlay -webkit-transform: échelle (0,0)} 40% {-webkit-transform: Scale (1.0)}} @ Keyframes rebondelay {0%, 80%, 100% {transform: échelle (0.0);Résumer:
1. La méthode peut être augmentée. Reencapsule la demande AJAX une fois. Implémentez la méthode de la barre automatique lors de l'appel de la demande AJAX.
2. S'il est angulaire, Angular fournit des méthodes pour surveiller les appels HTTP. Appelez simplement la méthode de la barre de progression lors de la surveillance des demandes d'exécution HTTP. Il n'est pas nécessaire d'appeler la méthode de la barre de progression chaque fois que vous exécutez les appels HTTP et surveillez les demandes d'exécution HTTP. Il n'est pas nécessaire d'appeler vous-même la méthode de la barre de progression chaque fois que vous exécutez HTTP.
Le contenu ci-dessus est lié à la barre de progression de chargement Asynchrones JS qui vous a été présentée par l'éditeur. J'espère que ce sera utile à tous!