suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Analyse der Fähigkeiten des asynchronen JS-Ladefortschritts bar_javascript

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

WBOY
WBOYOriginal
2016-05-16 15:02:141816Durchsuche

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

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des Modellmodells und seiner Sammlung im Backbone.js-Framework_GrundkenntnisseNächster Artikel：Detaillierte Erläuterung des Modellmodells und seiner Sammlung im Backbone.js-Framework_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen