Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS-tutorial js-php.cn

Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS

WBOY

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

asal

1835 orang telah melayarinya

Tunjukkan kesan:

1) Apabila anda mengklik Muatkan, simulasikan pemuatan tak segerak Penyemak imbas disekat Bar kemajuan muncul.

Idea pelaksanaan:

1. Apabila pengguna mengklik butang muat untuk melakukan permintaan tak segerak Kaedah dipanggil dan bar pemuatan muncul

2. Bagaimana untuk melaksanakan bar kemajuan?

1) Tambahkan div dalam document.body dan tutup penyemak imbas Tetapkan latar belakang kepada z-index = 999. Pengguna tidak boleh mengubah suai nilai antara muka apabila memuatkan

2) Tambahkan div dinamik dalam document.body.

Pelaksanaan kod:

Utama.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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Ringkasan:

1. Anda boleh mencadangkan kaedah tersebut merangkum semula permintaan Ajax Gunakan kaedah bar kemajuan untuk menyekat secara automatik apabila memanggil permintaan Ajax.

2. Jika Angular menyediakan kaedah untuk memantau panggilan http Hanya memanggil kaedah bar kemajuan semasa memantau permintaan pelaksanaan http setiap kali memantau permintaan pelaksanaan http. Tidak perlu memanggil kaedah untuk memaparkan bar kemajuan setiap kali anda melaksanakan http.

Kandungan di atas berkaitan dengan bar kemajuan pemuatan asynchronous js yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!