Rumah > hujung hadapan web > tutorial js > Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS

Analisis ringkas tentang kemahiran bar_javascript pemuatan tak segerak JS

WBOY
Lepaskan: 2016-05-16 15:02:14
asal
1813 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan