Maison >interface Web >js tutoriel >Une brève analyse des compétences bar_javascript de progression du chargement asynchrone JS

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

WBOYoriginal: 2016-05-16 15:02:141816parcourir

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>

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);
}

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);
}
}

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：详解Backbone.js框架中的模型Model与其集合collection_基础知识Article suivant：基于jQuery实现动态搜索显示功能_jquery

Articles Liés

Voir plus