Eine kurze Analyse der Fähigkeiten des asynchronen JS-Ladefortschritts bar

Eine kurze Analyse der Fähigkeiten des asynchronen JS-Ladefortschritts bar_javascript

WBOY

Freigeben： 2016-05-16 15:02:14

Original

1814 Leute haben es durchsucht

Effekt anzeigen:

1) Wenn Sie auf „Laden“ klicken, simulieren Sie das asynchrone Laden. Der Browser wird blockiert.

Umsetzungsideen:

1. Wenn der Benutzer auf die Schaltfläche „Laden“ klickt, um eine asynchrone Anfrage auszuführen, wird die Methode aufgerufen und eine Ladeleiste angezeigt

2. Wie implementiert man den Fortschrittsbalken?

1) Fügen Sie ein div in document.body hinzu und decken Sie den Hintergrund auf grau ab. Der Benutzer kann den Schnittstellenwert beim Laden nicht ändern

2) Fügen Sie ein dynamisches Div in document.body hinzu.

Code-Implementierung:

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Zusammenfassung:
1. Sie können die Methode zum erneuten Kapseln der Ajax-Anfrage verwenden.

2. Wenn Angular eine Methode zum Überwachen von HTTP-Aufrufen bereitstellt, ist es nicht erforderlich, die Fortschrittsbalkenmethode jedes Mal aufzurufen Überwachen von HTTP-Ausführungsanforderungen. Die Methode muss nicht jedes Mal aufgerufen werden, wenn Sie http ausführen.

Der obige Inhalt bezieht sich auf den vom Herausgeber eingeführten js-Fortschrittsbalken für das asynchrone Laden. Ich hoffe, er ist für alle hilfreich!