Une brève analyse des compétences bar_javascript de progression du chargement asynchrone JS-js tutoriel-php.cn

Une brève analyse des compétences bar_javascript de progression du chargement asynchrone JS

WBOY

Libérer： 2016-05-16 15:02:14

original

1814 Les gens l'ont consulté

Afficher l'effet :

1) Lorsque vous cliquez sur Charger, simulez un chargement asynchrone. Le navigateur est bloqué.

Idées de mise en œuvre :

1. Lorsque l'utilisateur clique sur le bouton de chargement pour effectuer une requête asynchrone, la méthode est appelée et une barre de chargement apparaît
.

2. Comment mettre en place la barre de progression ?

1) Ajoutez un div dans document.body et couvrez le navigateur. Définissez l'arrière-plan sur gris z-index = 999. L'utilisateur ne peut pas modifier la valeur de l'interface lors du chargement
.

2) Ajoutez un div dynamique dans document.body.

Mise en œuvre du code :

Main.html :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Loading.js" charset="utf-8"></script>
<link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<button onclick="showLoading()">Load</button>
</body>
</html>

Copier après la connexion

Chargement.js :

function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
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);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}

Copier après la connexion

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;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

Copier après la connexion

Résumé :

1. Vous pouvez proposer la méthode. Réencapsuler la requête Ajax. Utilisez la méthode de la barre de progression pour barrer automatiquement lors de l'appel de la requête Ajax.

2. S'il s'agit d'Angular, Angular fournit une méthode pour surveiller les appels http. Il suffit d'appeler la méthode de la barre de progression lors de la surveillance des requêtes d'exécution http. Il n'est pas nécessaire d'exécuter l'appel http à chaque fois. surveiller les requêtes d'exécution http. Pas besoin d'appeler la méthode qui affiche la barre de progression à chaque fois que vous exécutez http.

Le contenu ci-dessus est lié à la barre de progression du chargement asynchrone js introduite par l'éditeur. J'espère qu'il sera utile à tout le monde !